在 CSS 中溢出属性

Question

.course_strip{
    background-color: rgba(0,0,0,0.65);
    height: 44px;
    color:#F1F1F1;
    line-height: 44px;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    font-family: 'Segoe UI';
}
.course_strip p{
    padding: 0 10px;
}
.course_strip p:hover{
    background-color: #000;
}
.course_strip p:active{
    background-color: #4CAF50;
}

.course_strip .glyphicon{
    line-height: 44px;
    top: 0px;
}
.course_strip_left p{
    float: left;
}
.course_strip_right p{
    float: right;
}
.left_container{
    width: 20%;
    height: 100%;
    background-color: #f1f1f1;
    padding-top: 20px;
    padding-left: 16px;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    font-size: 15px;
}
.left_container h2{
    margin-top: -4px;
    font-size: 21px;
    font-weight: 500;
}
.left_container p{
    margin-top: 40px;
    padding-left: 1px;
    font-weight: 500;
}

<html>
<head>
    <title>Tutorial</title>
    <link rel="stylesheet" href="w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="course_strip">
        <div class="course_strip_left">
            <p class="glyphicon glyphicon-home"></p>
            <p>HTML</p>
            <p>CSS</p>
            <p>JAVASCRIPT</p>
            <p>SQL</p>
        </div>
        <div class="course_strip_right">
            <p class="glyphicon glyphicon-search"></p>
            <p class="glyphicon glyphicon-globe"></p>
            <p>EXAMPLES</p>
            <p>REFERENCES</p>
        </div>
    </div>
    <div class="left_container">
        <h2>HTML5 Tutorial</h2>
        <p>HTML HOME</p>
        <p>HTML Introduction</p>
        <p>HTML Editors</p>
        <p>HTML Basic</p>
        <p>HTML Elements</p>
        <p>HTML Attributes</p>
        <p>HTML Headings</p>
        <p>HTML Paragraphs</p>
        <p>HTML Styles</p>
        <p>HTML Formatting</p>
        <p>HTML Quotations</p>
        <p>HTML Comments</p>
    </div>
    <div class="right_container">
    </div>
</body>
</html>

到这里为止，对我来说一切都很好，

但是如果我在 CSS 中添加 overflow-y: scroll 到 .left_container class，那么左边的容器会向下移动一点，引入一条白色背景，这是不希望的。我无法找出为什么将溢出属性添加到 left_container 并将其向下移动。有人可以告诉我为什么会这样吗？我该如何解决？谢谢。

Answer 1

左容器向左浮动显示内联块高度计算（100vh - 顶部 header 像素高度） Top header class 也必须给左浮动显示内联块必须解决此问题

Answer 2

您可以在 css

中添加此代码

.course_strip{
float:left;
}
.left_container{
overflow:auto;
}

Answer 3

我不知道为什么，在您的具体示例中，添加 inerhit 以外的任何 overflow-y 值会使 .left_container 从边缘分离，但我知道它必须使用块级和视觉格式化模型。
对其应用溢出使其表现得像 float:left 一样。如果我遇到任何可以解释这种行为的事情，我会回到这里更新。

就解决方案而言，实现您想要的最简单方法是将 .left_container 和 .right_container 包装在自定义包装器中（我在下面将其命名为 .layout-wrapper）并将其添加到您现有的 CSS:

.layout-wrapper {
  padding-left: 20%;
  min-height: calc(100vh - 44px);
}
.layout-wrapper .left_container {
  position: absolute;
  left: 0;
  width: 20%;
  height: calc(100% - 44px);
  overflow-y: auto;
}

备注：

您可以获得与 position:fixed 相同的行为。
可以使用 flexbox 实现相同的行为，并提供大量用于对齐和排序的选项。我选择了 "classic" 块级解决方案，因为它具有更好的支持，并且您示例中的所有其他内容都使用相同类型的定位。
我将 overflow-y:scroll 更改为 auto 但这只是一个偏好问题。如果您希望始终看到栏，可以使用 scroll。

这是应用于您的示例的：

.course_strip{
    background-color: rgba(0,0,0,0.65);
    height: 44px;
    color:#F1F1F1;
    line-height: 44px;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    font-family: 'Segoe UI';
}
.course_strip p{
    padding: 0 10px;
}
.course_strip p:hover{
    background-color: #000;
}
.course_strip p:active{
    background-color: #4CAF50;
}

.course_strip .glyphicon{
    line-height: 44px;
    top: 0px;
}
.course_strip_left p{
    float: left;
}
.course_strip_right p{
    float: right;
}
.left_container{
    width: 20%;
    height: 100%;
    background-color: #f1f1f1;
    padding-top: 20px;
    padding-left: 16px;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    font-size: 15px;
}
.left_container h2{
    margin-top: -4px;
    font-size: 21px;
    font-weight: 500;
}
.left_container p{
    margin-top: 40px;
    padding-left: 1px;
    font-weight: 500;
}


.layout-wrapper {
  padding-left: 20%;
  min-height: calc(100vh - 44px);
}
.layout-wrapper .left_container {
  position: absolute;
  left: 0;
  width: 20%;
  height: calc(100% - 44px);
  overflow-y: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <div class="course_strip">
        <div class="course_strip_left">
            <p class="glyphicon glyphicon-home"></p>
            <p>HTML</p>
            <p>CSS</p>
            <p>JAVASCRIPT</p>
            <p>SQL</p>
        </div>
        <div class="course_strip_right">
            <p class="glyphicon glyphicon-search"></p>
            <p class="glyphicon glyphicon-globe"></p>
            <p>EXAMPLES</p>
            <p>REFERENCES</p>
        </div>
    </div>
    <div class="layout-wrapper">
      <div class="left_container">
        <h2>HTML5 Tutorial</h2>
        <p>HTML HOME</p>
        <p>HTML Introduction</p>
        <p>HTML Editors</p>
        <p>HTML Basic</p>
        <p>HTML Elements</p>
        <p>HTML Attributes</p>
        <p>HTML Headings</p>
        <p>HTML Paragraphs</p>
        <p>HTML Styles</p>
        <p>HTML Formatting</p>
        <p>HTML Quotations</p>
        <p>HTML Comments</p>
      </div>
      <div class="right_container">
      </div>
    </div>

在 CSS 中溢出 属性

Overflow property in CSS

html

css

jquery

overflow

在 CSS 中溢出属性