Question

我想制作一个使用100％屏幕空间的网页。我有两个div：

1st - 菜单固定宽度（~250px）
第二 - 什么是离开

对我来说误导的部分是菜单div不在第二个div中。它们都在一个包装div（100％宽度）。问题是如果我为第二个div写100％宽度，它会低于菜单。如果我写的％更少，我不能确定它将如何以较小的分辨率显示。

是否有一些负面的尺寸或什么？ ATM。第一个div漂浮在左边，第二个div漂浮在右边。

UDPATE：这里有一些代码：

div.main {
  width: 100%;
}
div.1st {
  width: 250px;
  float: left;
}
div.2nd {
  width: 100%; #here should be the space that is left in the main div#
  float: right;
}

<div class="main">
    <div class="1st">menu</div>
    <div class="2nd">content</div>
</div>

问题：如果内容中的字符串或对象足够大，则第二个div会低于第一个，因此内容可能会如此宽。菜单宽度是固定的。

更新＃2：如果我将内容宽度设为空，那么它也会低于菜单，因为内容足够宽

Answer 1

是的，您可以通过设置absolute和left来确定right定位元素的宽度。这使浏览器解决了width {{1}}中的等式。有关示例，请参阅此standard。

Answer 2

您可以执行以下操作：http://jsfiddle.net/steweb/78x8y/

标记：

<div id="container">
    <div id="left">Width=> 250px, float left</div>

    <!-- following div takes automatically the remaining width, no need to declare further css rules -->
    <div id="remaining">Width => the remaining space</div>
</div>

的CSS：

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#left{
    float:left;
    width:250px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}

Answer 3

看一下这篇文章，你有正确的解决方案：

http://www.alistapart.com/articles/holygrail

html div浮动和大小调整

3 个答案: