内容区域CSS的自动高度侧边栏

编程问答 2022-06-07

问题描述

我有一个CSS高度调整问题，侧栏的高度或内容应彼此对齐，例如.left-section具有500的高度，但是现在内容区域未与left部分的高度对齐由于左侧区域有一个顶部区域（红色顶部区域），其内容可以增长，所以我无法在列表区域使用边距或填充，是否有解决方案？

https://jsfiddle.net/e548zLjt/

问题截图

enter image description here

<!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>

谢谢

解决方法

您可以像下面那样更新代码。只需在左侧部分添加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>

,

要解决您的问题，只需在左侧部分添加.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>

,

我所做的只是以下内容

.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>

htmlsassscrollbarxhtml