html，身高100％

Question

我對container-about div有問題。 它的高度是100％，因爲我想讓div佔據標題div後的整個寬度和高度。 問題是現在我不滾動顯示全文。

我們還希望能夠使用平板電腦和智能手機的滾動顯示文本。

感謝您的幫助。

<div class='header'> 
    <div class='header-container'> 

</div> 
</div> 
<div class='container-wrapper'> 
    <div class='container-about'> 
     <div class='about-text'> 
      text comes here..... 
      ........ 
     </div> 
    </div> 
</div> 

鏈接：http://ttest11234.librax.net/index.html

CSS：

* { 
margin: 0 auto; 
padding: 0; 
    } 

html, body { 
height: 100%; 
overflow: hidden; 
    } 

body { 
font-size: 12px; 
line-height: 1.5; 
background: #000; 
font-weight: 400; 
} 

.header { 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100px; 
position: fixed; 
background: gray; 
opacity: 0.8; 
} 

.header-container { 
width: auto; 
height: 100px; 
margin: 0 10% 0 10%; 
text-align: center; 
} 

.container-wrapper { 
width: 100%; 
height: 100%; 
} 

    .container-about { 
    margin: 100px auto; 
padding-bottom: 2%; 
width: 100%; 
height: 100%; 
background: #FFF; 
position: relative; 
} 

.container-about h3 { 
padding: 0 10% 5% 10%; 
font-family: 'Verdana', sans-serif; 
font-size: 12px; 
    line-height: 150%; 
font-weight: 400; 
} 

Answer 1

添加overflow: scrollproperty在container-aboutclass和container-wrapperclass的DIV

.container-about { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 100%; 
    margin: 100px auto; 
    overflow: scroll; 
    padding-bottom: 2%; 
    position: relative; 
    width: 100%; 
} 

Answer 2

解決辦法很簡單，就是overflow: auto添加到.container-wrapper。這給你所需的滾動條。

但現在你的問題是，div太高（它是100％的身高+ 100像素）。給它一個100px頂部填充和絕對的位置標題。

Answer 3

1. 你不應該使用一個固定的上邊距爲.contain-有關，因爲你要使用他們的移動設備因爲那需要更多的桌面空間。相反，你可以使用％或em。
2. 將overflow-x設置爲auto或滾動.about-text以獲取滾動條。