浮动时高度实际上没有改变高度

Question

现在我正在编写一个具有两列布局的菜单。这是代码。

HTML:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>replit</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="stockapps">
        <img src="icons/eShop.svg">
        <img src="icons/sverse.svg">
      </div>
      <div class="main">
        <p>
          Hello!
        </p>
      </div>
    </body>
    </html>

CSS:

    .stockapps {
      background-color: #111;
      float: left;
      width: 5%;
      height: 100%;
    }
    
    .stockapps :after {
      content: "";
      display: table;
      clear: both;
    }
    
    .stockapps img{
      width:100%;
      display: inline;
      vertical-align: top;
    }
    
    .main {
      float: left;
      padding: 2%;
      width: 91%;
      overflow: hidden;
    }

问题是 stockapps div 标签没有用高度填充整个屏幕，而是选择只填充子对象占据的区域。

我尝试过使用 clear-fix 并将溢出设置为隐藏，但似乎都无法解决问题。这可能是一些初学者的错误，因为 CSS 不是我的强项

这个 fiddle 展示了这个问题。

Answer 1

如果我的理解正确，您需要为菜单创建一个 2 栏布局。

为了实现这种布局，我会将 <div class="stockapps"> 和 <div class="main"> 包装到另一个 <div> 中，其中 class 为 manu-wrap 并添加此 CSS 样式：

.menu-wrap {
    display: flex;
    justify-content: space-between;
}

然后我会删除 float 属性，您应该有一个有效的 2 列布局。

您可以找到更多关于 display: flex here。

Answer 2

您可以将 stockapps 和主要 divs 包装到一个容器中 div

按以下方式设置此容器的样式

我使用了 stockapps 的背景颜色 div 来显示它的高度

.container {
  display: flex; 
  align-items: stretch;
    /*Set height as you want, you can use height in px */
  height: 100vh;
}

.stockapps {
/* used background-color to show you how much height it takes*/
  background-color: #999;
  /*You can ignore width if it's not convenient for your desired final output */
  width: 50%
}

<div class="container">
  <div class="stockapps">
    <img src="icons/eShop.svg">
    <img src="icons/sverse.svg">
  </div>
  <div class="main">
    <p>
      Hello!
    </p>
  </div>
</div>

浮动时高度实际上没有改变高度

Height not actually changing hieght while floating

html

css

css-float

clearfix