相对于内容区域的自动高度边栏 CSS

Question

我有一个 CSS 高度调整问题，侧边栏或内容的高度应该相互对齐，比如 .left-section 有 500 高度但现在内容区域没有对齐左边部分的高度由于左边部分有一个顶部部分（红色顶部区域），内容可以增长，所以我不能在列表部分使用边距或填充，有什么解决方案吗？

https://jsfiddle.net/e548zLjt/

问题截图

<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style type="text/css">
    ul,ol {margin: 0px;padding: 0px;}
    .left-section {height: 500px;display:block;}
    .content-area {background: #ccc;}
    .top-section  {background: #ff0000;}
    .list-section  {background: #ffff00;overflow: auto;max-height: 100%}
    .list-section li {height: 100px;background: #eee;width: 100%;display: block;border-bottom: 1px solid #999;}
  </style>
</head>
<body>

  <div class="wrapper main-cont">
    <div class="container-fluid">
      <div class="row no-gutters">
        <div class="col-md-4 left-section">
          <div class="top-section">
            <h1>This is Top Section</h1>
            <div class="form-group">
              <label for="">Search</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="list-section">
            <ul>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
            </ul>
          </div>
        </div>
        <div class="col-md-8 content-area text-center">
          <p>Can we make either content area or left section to have equal bottom end without providing separate height values to left section and the content area? can we have single value height adjust for them? right now list is bigger than the content area</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

谢谢

Answer 1

要解决您的问题，只需将 .left-section { overflow: overlay; } 添加到左侧部分

ul,
ol {
  margin: 0px;
  padding: 0px;
}

.left-section {
  height: 500px;
  display: block;
}

.content-area {
  background: #ccc;
}

.top-section {
  background: #ff0000;
}

.left-section {
  overflow: overlay;
}

.list-section {
  background: #ffff00;
  overflow: auto;
  max-height: 100%
}

.list-section li {
  height: 100px;
  background: #eee;
  width: 100%;
  display: block;
  border-bottom: 1px solid #999;
}

<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

  <div class="wrapper main-cont">
    <div class="container-fluid">
      <div class="row no-gutters">
        <div class="col-md-4 left-section">
          <div class="top-section">
            <h1>This is Top Section</h1>
            <div class="form-group">
              <label for="">Search</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="list-section">
            <ul>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
            </ul>
          </div>
        </div>
        <div class="col-md-8 content-area text-center">
          <p>Can we make either content area or left section to have equal bottom end without providing separate height values to left section and the content area? can we have single value height adjust for them? right now list is bigger than the content
            area</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

您可以像下面这样更新您的代码。只需将 d-flex flex-column 添加到左侧部分

ul,
ol {
  margin: 0px;
  padding: 0px;
}

.left-section {
  height: 500px;
}

.content-area {
  background: #ccc;
}

.top-section {
  background: #ff0000;
}

.list-section {
  background: #ffff00;
  overflow: auto;
  max-height: 100%
}

.list-section li {
  height: 100px;
  background: #eee;
  width: 100%;
  display: block;
  border-bottom: 1px solid #999;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="wrapper main-cont">
  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-md-4 left-section d-flex flex-column">
        <div class="top-section">
          <h1>This is Top Section</h1>
          <div class="form-group">
            <label for="">Search</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="list-section">
          <ul>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
            <li>A List Item</li>
          </ul>
        </div>
      </div>
      <div class="col-md-8 content-area text-center">
        <p>Can we make either content area or left section to have equal bottom end without providing separate height values to left section and the content area? can we have single value height adjust for them? right now list is bigger than the content
          area</p>
      </div>
    </div>
  </div>
</div>

Answer 3

下面是我做的-

.left-section {
  /* replaced height: 500px; with this */
  height: calc(100vh - 5px);
  /* and added this */
  overflow: hidden;
  /* and removed display: block; no need for that */
}

.list-section {
  background: #ffff00;
  overflow: auto;
  /* replaced max-height: 100% with this */
  height: 100vh;
}

在对您提供的所有代码进行这些更改后，这是我得到的片段，只有列表在左侧面板上滚动，红色部分保留在顶部，希望如此会有所帮助-

*全屏打开代码段因为你使用了col-md-*所以如果你不全屏打开它就不能正常看到演示

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
    ul,ol {margin: 0px;padding: 0px;}
    .content-area {background: #ccc;}
    .top-section  {background: #ff0000;}
    .left-section {height: calc(100vh - 5px); overflow: hidden}
    .list-section  {background: #ffff00;overflow: auto;height: 100%; margin-bottom: auto}
    .list-section li {height: 100px;background: #eee;width: 100%;display: block;border-bottom: 1px solid #999;}
  </style>

  <div class="wrapper main-cont">
    <div class="container-fluid">
      <div class="row no-gutters">
        <div class="col-md-4 left-section">
          <div class="top-section">
            <h1>This is Top Section</h1>
            <div class="form-group">
              <label for="">Search</label>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="list-section">
            <ul>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
              <li>A List Item</li>
            </ul>
          </div>
        </div>
        <div class="col-md-8 content-area text-center">
          <p>Can we make either content area or left section to have equal bottom end without providing separate height values to left section and the content area? can we have single value height adjustemphasized text for them? right now list is bigger than the content area</p>
        </div>
      </div>
    </div>
  </div>

相对于内容区域的自动高度边栏 CSS

Auto Height Sidebar with respect to the content area CSS

html

css

sass

xhtml

scrollbar