-1

嗨，我有页面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;
}
4

2 回答 2

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;
}
于 2013-01-31T19:07:42.330 回答
0

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

如果您想要等高的列将较短的列浮动到一侧，然后设置position: relative，top: 0; bottom: 0;然后将另一列设置为必须overflow: hidden;“清除”浮动。注意：浮动列应该首先出现在标记中才能起作用。

于 2013-01-31T19:18:31.463 回答