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以获取滚动条。