html，身高100％

Question

我有一个关于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: scroll div的 container-about class和container-wrapper class的overflow: scroll property

.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-about使用固定的上边距，因为您将在移动设备上使用它们，因为这将比台式机占用更多的空间。 相反，您可以使用％或em。
2. 将overflow-x设置为自动，或将.about-text滚动以获取滚动条。