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类，那么左侧容器会向下移动一点，引入一条白色背景，这是不希望的。我无法找出为什么向left_container添加溢出属性将其向下移动。有人可以告诉我为什么会这样？我该如何解决？感谢。

Answer 1

我不知道为什么，在您的具体示例中，添加除overflow-y以外的任何inerhit值会使.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可以实现相同的行为，并为对齐和排序提供了大量选项。我选择了“经典”的块级解决方案，因为它有更好的支持，而你的示例中的其他所有内容都使用相同类型的定位。
我将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>

Answer 2

左侧容器浮动左显示内联块高度计算（100vh - 顶部标题高度，以px为单位）顶部标题类也必须给浮动左显示内联块必须解决问题

Answer 3

您可以在css中添加此代码

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

CSS中的溢出属性

3 个答案: