时间戳

首页 > 解决方案 > 相对于内容区域 CSS 的自动高度侧边栏

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

问题描述

我有一个 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>

谢谢

标签： htmlcsssassxhtmlscrollbar

解决方案

您可以像下面这样更新您的代码。只需添加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>

推荐阅读