Question

嗨，我有页面http://rygol.cz/qlife/，当我缩小内容时，内容会从他的div中消失。如果我你身高：自动;或者高度：100％它还可以，但是左栏比右栏小，明显没有帮助我。有人知道如何解决它吗？

#leftcolumn { 
 color: #333;
 background: #fff;
 background-image:url("./images/corner.png");
 background-repeat:no-repeat;
 padding: 10px;
 height: 800px;
 width: 244px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 background: #fff;  
 padding: 10px;
 height: 800px;
 width: 638px;
 display: inline;
 margin-bottom: 10px;
}

Answer 1

如果您需要在标题和内容之间留出额外的空间，您应该继续将 #leftcolumn 和 #rightcolumn 放在另一个包含背景的包装容器中 - 颜色设置并且 #container 没有设置背景颜色。

HTML 结构：

<div id="container">
  <div id="header"></div>
  <div id="content-wrapper">
      <div id="leftcolumn"></div>
      <div id="rightcolumn"></div>
  </div>
</div>

CSS ：

#container {
margin: 0 auto;
width: 922px;
}

#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}

#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}

#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}

#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}

Answer 2

删除列中的高度声明。您也可以使用overflow-y: scroll，但我会坚持消除高度。另一件需要考虑的事情是，人们通常不会缩小那么远：文本变得无法在缩放时读取（chrome v24）。

如果您想要相同高度的列，则将较短的列浮动到一侧，然后设置position: relative和top: 0; bottom: 0;，然后将另一列设置为overflow: hidden;以“清除”浮动。注意：浮动列应首先出现在标记中以使其起作用。

css内容超出了div

2 个答案: