CSS如何自动使左栏与右栏的高度相同

问题描述

我是CSS的新手，这种情况是这样的：在我的网站上，我有一个背景图片（占据整个页面）和一个框架div（其中插入了我网站的内容）；框架具有顶部横幅div，在该框架下，框架分为左栏和右栏。我的问题是如何使左栏与右栏的长度（高度）相同，因为碰巧右栏会变长，但左栏保持固定的长度。

body{
   background-image: url("../img/cd.png");
   background-repeat: no-repeat;
   background-size: 2100px;
   margin: 0;
   padding: 0;
   background-attachment: fixed;
}

#frame{
   background-color: white;
   width: 80%;
   margin: 0 auto;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
}

#left_bar{
    float: left;
    width: 22%;
    background-color: #b3d1ff;
    border-radius: 0 0 0px 10px;
    min-height: 1100px; 
}

#right_bar{
    float: right;
    width: 78%;
}

<body>           
  <div id="frame">
  <div id="top_banner"></div>
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</body>

解决方法

您可以在此处使用flexbox。 Here is a good guide to Flexbox（如果您有兴趣）。

例如：

body{
   background-image: url("../img/cd.png");
   background-repeat: no-repeat;
   background-size: 2100px;
   margin: 0;
   padding: 0;
   background-attachment: fixed;
}

#frame{
   background-color: white;
   width: 80%;
   margin: 0 auto;
   border-radius: 0 0 10px 10px;
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}

#top_banner {
  flex-basis: 100%;
}

#left_bar{
    width: 22%;
    background-color: #b3d1ff;
    border-radius: 0 0 0px 10px;
    min-height: 1100px; 
}

#right_bar{ 
    background-color: #ff0000;
    width: 78%;
}

<body>           
  <div id="frame">
  <div id="top_banner"></div>
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</body>

将您的left_bar和right_bar包装为1 div，并使其display: flex

<div style="display: flex">
  <div id="left_bar"></div>
  <div id="right_bar"></div>
</div>

html

CSS如何自动使左栏与右栏的高度相同

问题描述

解决方法

相关问答