Question

如上图所示，我试图将侧边栏导航扩展到整个父容器，但我仍然坚持如何做到这一点。我已经尝试了很长一段时间，但我仍然不确定我需要做什么。

我在HTML文档中将其结构化为：

<div class="container">
  <div class="sidebar">
    <ul>
      <li>blah blah</li>
      <li>blah blah</li>
      <li>blah blah</li>
    </ul>
  </div>
    LOREM IPSUM TEXT HERE

以上的CSS是：

.container { 
  border-radius: 1px;
  box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
  background-color: #CDCDCD;
  margin: auto;
  margin-top: 6%;
  width: 70%;
  padding: 10px;
  overflow: hidden;
}

.sidebar {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-right: 1px solid;
  border-right-color: rgba(0,0,0,0.1);
  float: left;
  width: 20%;
}

我感谢我能得到的任何和所有帮助。我倾向于谷歌寻求答案，我不知道这是否仅仅归咎于我纯粹是愚蠢而且有一个心灵放屁。我尝试过简单的事情，比如将侧边栏容器的最小高度和高度设置为100％都无济于事。谢谢你的帮助。

更新
flexbox方法似乎是半工作的，但它干扰了我的标题代码。新的结果似乎是这样的：

这是我的代码：

.container { 
border-radius: 1px;
box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
background-color: #CDCDCD;
margin: auto;
margin-top: 6%;
width: 70%;
padding: 10px;
overflow: hidden;
display: flex;
}

.container .header {
font-family: 'Raleway', sans-serif;
font-size: 20px;
}

.container .header .right {
float: right;
}

.sidebar {
position: relative;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-right: 1px solid;
border-right-color: rgba(0,0,0,0.1);
float: left;
width: 20%;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 20%;
}

HTML是：

<div class="container">
  <div class="header">Bay Area Roleplay - AdminCP<div class="right">Dashboard</div>
        <hr />
    </div>
    <div class="sidebar">
    <ul>
      <li>blah blah</li>
      <li>blah blah</li>
      <li>blah blah</li>
    </ul>
  </div>
    LOREM IPSUM TEXT HERE

Answer 1

实现两个长度相同的列的最简单方法是使用 flexbox 。

要使用flexbox，只需将import com.fasterxml.jackson.databind.annotation.JsonDeserialize; import com.fasterxml.jackson.databind.annotation.JsonPOJOBuilder; import lombok.Builder; import lombok.Getter; @Getter @Builder @JsonDeserialize(builder = Feature.FeatureBuilder.class) public class Feature { private final String name; /** * Builder */ @JsonPOJOBuilder(withPrefix = "") public static final class FeatureBuilder { } }添加到display: flex：

.container

.container {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
  background-color: #CDCDCD;
  margin: auto;
  margin-top: 6%;
  width: 70%;
  padding: 10px;
  overflow: hidden;
  display: flex;
}

.sidebar {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-right: 1px solid;
  border-right-color: rgba(0, 0, 0, 0.1);
  float: left;
  width: 20%;
}

希望这有帮助！：）

Answer 2

只需将 display：flex 添加到父级，并将一些规则添加到子级。内容部分的附加包装器，用于将标头保持在父容器的顶部。试试吧：

.container { 
    border-radius: 1px;
    box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
    background-color: #CDCDCD;
    margin: auto;
    margin-top: 6%;
    width: 70%;
    padding: 10px;
    overflow: hidden;
}

.content-wrapper {
    display: flex;
}

.container .header {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
}

.container .header .right {
    float: right;
}

.sidebar {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    border-right: 1px solid;
    border-right-color: rgba(0,0,0,0.1);
    float: left;
    width: 20%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 20%;
}

<div class="container">
    <div class="header">Bay Area Roleplay - AdminCP
        <div class="right">Dashboard</div>
        <hr />
    </div>
    <div class="content-wrapper">
        <div class="sidebar">
            <ul>
                <li>blah blah</li>
                <li>blah blah</li>
                <li>blah blah</li>
            </ul>
        </div>
        <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni exercitationem eos officiis praesentium nulla fuga rerum vero tempora aperiam minus assumenda architecto, aliquid aut, optio iure eveniet veniam maxime beatae voluptatum fugiat veritatis ad sunt quos! Itaque asperiores dolorum obcaecati, harum quia fugit odit nemo tempore nesciunt beatae blanditiis ullam nostrum provident. Pariatur cupiditate veniam et dolorum alias, atque accusamus. Saepe et maxime obcaecati sunt veritatis facere assumenda. Culpa et quibusdam veniam inventore mollitia aliquid velit magni distinctio fugiat fuga, ex, nobis laudantium reprehenderit quos modi itaque similique, assumenda necessitatibus error fugit? Voluptate quod molestias assumenda alias laudantium eius quia!
        </p>
    </div>
</div>

如何在父容器中创建div高度为100？

2 个答案: