gpt4 book ai didi

html - div高度溢出父div

转载 作者:行者123 更新时间:2023-11-28 09:42:11 25 4
gpt4 key购买 nike

我需要底部的 2 个 div 来占用高度提示,而不会溢出父 div。如果 2 个底部 div 的内容太多,我希望它们溢出:滚动并滚动该 div 的内容。该页面应该看起来好像正文有 overflow:hidden

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;
}

see fiddle here

关于html - div高度溢出父div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25371202/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com