Прокрутка прокрутки прокрутки не работает

Question

Идея состоит в том, чтобы баннер и панель навигации застревали в верхней части окна браузера, которые я не хочу прокручивать, и содержимое, находящееся под возможностью прокрутки. Два раздела contentleft и contentright Я хочу иметь одну и ту же высоту, даже если контент не такой большой.

@charset "utf-8"; 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.banner { 
 
    width: 100%; 
 
    height: 125px; 
 
    background-color: #034569; 
 
    position: relative; 
 
    top: 0px; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #235B79; 
 
} 
 
.contentwrapper { 
 
    width: 100%; 
 
    background-color: #aaaaaa; 
 
    position: fixed; 
 
    top: 175px; 
 
    overflow-y: scroll; 
 
} 
 
#contentleft { 
 
    width: 25%; 
 
    height: auto; 
 
    background-color: #034569; 
 
    float: left; 
 
} 
 
#contentright { 
 
    width: 75%; 
 
    height: auto; 
 
    background-color: #ffffff; 
 
    float: right; 
 
}

Answer 1

Для вашего CSS вам нужно баннер и навигационной панели, чтобы иметь position:fixed свойство, которое позволит предотвратить прокрутку. Если .contentwrapper имеет объявленную статическую высоту, мы можем сделать элементы div внутри, заполнить высоту height:100%;. Также мы можем назначить html и body height: html, body: height:100%;.

@charset "utf-8"; 
 
body, html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height:100%; 
 
} 
 
.banner { 
 
    width: 100%; 
 
    height: 125px; 
 
    background-color: #034569; 
 
    position: fixed; 
 
    top: 0px; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    top: 125px; 
 
    background-color: #235B79; 
 
} 
 
.contentwrapper { 
 
    width: 100%; 
 
    background-color: #aaaaaa; 
 
    padding-top: 175px; 
 
    height:300px; 
 
    overflow-y: scroll; 
 
} 
 
#contentleft { 
 
    width: 25%; 
 
    height: 100%; 
 
    background-color: #034569; 
 
    float: left; 
 
} 
 
#contentright { 
 
    width: 75%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
    float: right; 
 
}