我没有做太多前端 - 我的问题是双重的，当高度设置为 100% 时，我的 .row div 推过 viewport - 我猜这与topnav 和侧边栏之间的相对/固定位置交互？我该如何解决？滚动时如何使 topbar 保留在视口(viewport)中？ position: fixed 打破格式。
我还必须给 column2 一个左边距以阻止它在侧边栏后面滑动 - 这是处理它的最佳方法吗？
* {
box-sizing: border-box;
}
html {
height: 100%;
}
.row{
height: 100%;
}
.row:after {
content: "";
display: table;
clear: both;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.topnav{
background-color: whitesmoke;
color: rgb(91, 27, 143);
text-decoration: bold;
font-size: 12pt;
overflow: hidden;
height: 6%;
border-bottom: 2px solid #b338a9bb;
position: relative;
z-index: 2;
}
.column1 {
float: left;
width: 15%;
padding: 15px;
height: 100%; /* Full-height: remove this if you want "auto" height */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
background-color: lightgray; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.column2 {
float: left;
width: 60%;
padding: 15px;
margin-left: 15%;
height: 100%;
}
.column3 {
float: left;
width: 25%;
padding: 15px;
border-left: 2px solid lightgray;
height: 100%;
}
.button{
background-color: #b338a9bb;
border: 2px solid #b338a9bb;
border-radius: 12px;
color: whitesmoke;
transition-duration: 0.4s;
display: inline-block;
padding: 8px 15px;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 100px;
max-height: 50px;
}
.button:hover{
color: #424242;
background-color: whitesmoke;
border: 2px solid #b338a9bb;
}
.button:focus{
outline: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<div style="float: right;padding-right: 5px; padding-top: 10px;">
<button class="button" href="#">logout</button>
</div>
</div>
<div class="row">
<div class="column1">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column2">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column3">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>
</body>
</html>最佳答案
我不建议为导航栏使用百分比高度，而是使用:
position: fixed;
top: 0;
height: 60px;
width: 100%;
对于 column2 和 column3 使用:
height: 100vh;
margin-top: 60px; (to offset the height of the navbar)
关于html - CSS 阻止 div 高度超出视口(viewport)+滚动时使 topnav 保持不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51651163/