如何让左侧等于右侧？

Question

我有这样的html结构：

＆＃13;

＆＃13;

nav{
  float:left;
  display:inline-block;
  width:40px;
  list-style-type:none;
}
header,.body{
  display:inline-block;
}
header{
  height:30px;
  background:blue;
 width: calc(100% - 40px);
}
.body{
  background:red;
 width: calc(100% - 40px);
}

＆＃13;

<div class="wrapper">
  <nav>
    <ul>
       <li>Test 1</li>
       <li>Test 1</li>
       <li>Test 1</li>
       <li>Test 1</li>
       <li>Test 1</li>
    </ul>
 </nav>
  <header>Header</header>
  <div class="body">
      <h3>something</h3>
   </div>
</div>


    

＆＃13;

＆＃13;

＆＃13;

我想要的是我的<div class="body"></div>将以导航高度结束。因此，如果我有100 li，则标题将始终具有相同的30px高度，但具有红色背景的主体将转到导航结束。他们将拥有相同的高度。 任何建议我怎么能这样做？

Answer 1

您可以打包header和content（我将课程body更改为content，这样您就不会将其与默认的body标记混淆在包装器内（我将其命名为contentWrapper）并在flexBox上使用wrapper

见下文

content（红色空格）的高度是使用calc(100% - 30px)计算的，其中100%是列的整个高度，30px是{header的高度1}}

.wrapper {
  display: flex;
}

nav {
  width: auto;
  background: green;
}

header {
  height: 30px;
  background: blue;
}

.content {
  background: red;
  height: calc(100% - 30px)
}

h3 {
  margin-top: 0
}

<div class="wrapper">
  <nav>
    <ul>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
    </ul>
  </nav>
  <div class="contentWrapper">
    <header>Header</header>
    <div class="content">
      <h3>something</h3>
    </div>
  </div>
</div>

Answer 2

我认为你混淆了css选择器body，您可以使用de css selector nav{ float:left; display:inline-block; width:30px; } header,.body{ display:inline-block; } header{ height:30px; background:blue; } .body{ background:red; } 选择一个名为'body'的类，它选择DOM的整个主体。

将您的CSS更改为：

div

正如 Mihai T 所说的那样，我建议您将body的班级名称更改为{{1}}之外的其他名称，因为这会导致混淆。

Answer 3

这是你需要的吗？

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  height: 90px;
  align-items: center;
  margin-top: 1em;
}

.wrapper>div {
  background: blue;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div>* {
  width: 100%;
  height: 45px;
}

.body {
  background: red;
}

h3 {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="wrapper">
  <nav>
    <ul>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
      <li>Test 1</li>
    </ul>
  </nav>
  <div>
    <header>Header</header>
    <div class="body">
      <h3>something</h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;