滚动问题滚动不起作用

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和身高：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; 
 
}