html - 页面内内容的溢出自动
问题描述
正如您在图片中看到的,我不希望我的页面可滚动。根据我的研究,我发现我应该将其设置height
为100vh
(如何使 div 成为浏览器窗口的 100% 高度)。4
现在我将元素&之类的所有大内容设置5
为overflow:auto
. 但由于某种原因,没有滚动条,内容大于屏幕高度。
我一直在研究并找到了这个答案:Make a div fill the height of the remaining screen space
按照答案仍然没有解决我的问题。我在我的项目中使用 mdbootstrap 所以它可能会导致问题。
我的问题是如何实现这一点(不使用像 100px 这样的即时值):
无法按我预期工作的示例片段:
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.row {
border: 1px dotted grey;
}
.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
background-color:grey;
}
.content {
flex: 1 1 auto;
background-color:#C4C4C4;
}
.scrollableContent {
flex: 1 1 auto;
background-color:#7D7D7D;
overflow: auto;
margin:5px;
}
.item {
background-color:black;
color:white;
margin:5px;
}
.footer {
flex: 0 1 40px;
background-color:grey;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<b>Navigation Bar</b>
</div>
<div class="row content">
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="row scrollableContent">
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
</div>
</div>
<div class="row footer">
<b>Footer</b>
</div>
</div>
应该是可滚动的Long Content
,并且页眉和页脚应该是固定的。
编辑:
我注意到将高度设置为.scrollableContent
类似的值200px
确实以某种方式实现了我想要的。只是我希望它尽可能大。
解决方案
据我了解是这样的:
* {
margin:0;
}
html {
height:100%;
}
body {
height:100%;
display:flex;
flex-direction:column;
}
.header {
background:tomato;
color:#fff;
padding:10px;
}
.content {
padding:10px;
flex:1;
max-height:calc(100% - 76px) /* 76 is header plus footer total*/;
overflow-y:scroll;
}
.footer {
background:dodgerblue;
color:#fff;
padding:10px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<style type="text/css">
</style>
<body>
<header class="header">Header</header>
<main class="content">Content
<div class="scrollableContent">
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
Long Content<br>
</div>
</main>
<footer class="footer">Footer</footer>
</body>
</html>