滾動問題滾動不起作用

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; 
 
}