CSS 停止 div 超出视口的高度 + 滚动时使顶部导航保持不变

Question

我没做过多少前端 - 我的问题是双重的，当高度设置为 100% 时，我的 .row div 超过了 viewport - 我猜这是为了如何处理顶部导航和侧边栏之间的 relative/fixed 位置交互？我该如何解决？滚动时如何使 topbar 保留在视口中？ 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>

http://jsfiddle.net/1xgqjown/4/

Answer 1

您应该将 topnav 的位置设置为固定

.topnav{
    position: fixed;
}

然后即使在滚动时它也会留在原地。

Answer 2

使用position: fixed;和width:100%和topnav

* {
  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: fixed;
  z-index: 2;
  width:100%
}
.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>

Answer 3

我不建议对导航栏使用百分比高度，而是使用：

position: fixed;
top: 0;
height: 60px;
width: 100%;

对于 column2 和 column3 使用：

height: 100vh;
margin-top: 60px; (to offset the height of the navbar)

Answer 4

使用顶部导航的这些属性

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px; //or whatever you want

CSS 停止 div 超出视口的高度 + 滚动时使顶部导航保持不变

CSS stop div height from extending past viewport + make topnav stick when scrolling

html

css

height

layout