Question

我需要2个底部div来接收高度的提示，而不会溢出父div。如果2个底部div有太多内容我希望它们溢出：滚动并滚动该div的内容。页面看起来好像身体有溢出：隐藏

HTML

<body>
<div class="mainWrapper">
    <div class="mainHeader">
        header
    </div>
    <div class="mainNav">
        nav
    </div>
    <div class="mainContent">
        text
    </div>
</div>

CSS

html{
   height: 100%;
}
body {
   background-color: #69a8ca;
   background-repeat: no-repeat;
   background-position: 0 100%;
   margin-top: 2px;
   margin-bottom: 2px;
   height:99%;
   overflow:hidden;
}

.mainWrapper{
   height:100%;
}
.mainNav, .mainContent{
   height: 100%;
   margin-top: 5px;
}

.mainHeader{
   display:block;
   text-align:center;
   height: 150px;
   background:red;
}

.mainNav{
   float:left;
   width: 100px;
   background: blue;
}

.mainContent{
   background: green;
}

http://jsfiddle.net/dj52b0d7/

Answer 1

将overflow:hidden添加到.mainWrapper并将overflow:auto添加到.mainNav and。mainContent`

http://jsfiddle.net/dj52b0d7/1/

Answer 2

使用您当前的代码，应用此CSS：

html {
height: 100%;
}
body {
background-color: #69a8ca;
background-repeat: no-repeat;
background-position: 0 100%;
margin-top: 2px;
margin-bottom: 2px;
height:100vh;
}
.mainWrapper {
height:100%;
}
.mainNav, .mainContent {
height: calc(100vh - 160px);
margin-top: 5px; overflow:auto;
}
.mainHeader {
display:block;
text-align:center;
height: 150px;
background:red;
}
.mainNav {
float:left;
width: 100px;
background: blue;
}
.mainContent {
background: green;
}

see fiddle here

div高度溢出父div

2 个答案: