Div高度溢出父Div

我需要2个底部div占用高度提醒，而不会溢出超过父div。如果2个底部div有太多内容，我希望他们做overflow:scroll和滚动该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/

在你当前的代码中，应用下面的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;
}

将overflow:hidden添加到.mainWrapper中，将overflow:auto添加到.mainNav and中。maincontent '

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

相关内容

最新更新

热门标签：