1

我很抱歉一直问同一个问题的不同版本，但这似乎很难实现。这是我到目前为止的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

现在似乎我看到了滚动条，但我只想让外部 DIV 占据屏幕的 90%，并且没有滚动条。

在这里找到小提琴。

4

5 回答 5

1

这是一个我从未见过的非常有趣的错误。在不采用讨厌的body { overflow:hidden; }方法的情况下，我找到了一些修复方法：

1 - 使用 display:inline-block（不是真正想要的）

    #outer {
      display:inline-block;
        width: 90%;
        height: 90%;
        margin: 5% 5% 5% 5%;
        background-color: #333;
    }

2 - 使用填充而不是边距（不是实际想要的）

    #outer {
        width: 90%;
        height: 90%;
        padding: 5% 5% 5% 5%;
        background-color: #333;
    }

3 - 使用绝对位置（推荐）

    #outer {
        position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%;
        background-color: #333;
    }

我将在进一步调查此问题时编辑此答案。

根据http://www.w3.org/TR/CSS2/box.html#box-dimensions

百分比是根据生成框的包含块的宽度计算的。请注意，“margin-top”和“margin-bottom”也是如此。

这意味着通过将 90% 的宽度放在 body 上，将导致 5% 的边距是 90% 中的 5%，而不是预期的 100%，这会导致“错误”。- 同样适用于填充。

于 2013-01-08T03:18:26.170 回答
0

试试这个：

body, html{
        height: 100%;
        margin: 0;
    }
    #outer {
        width: 90%;
        height: 90%;
        position: absolute;
        margin: 5%;
        background-color: #333;
    }
于 2013-01-08T03:18:09.023 回答
0

这是我的做法：http: //jsfiddle.net/remibreton/8hfwp/1/

这里的技巧是让浏览器计算出外部元素的宽度和高度。为此，您指定top:0; bottom:0; left:0; right:0;以确保它填满整个可用空间。然后添加margin:5%;以将高度和宽度减小到 90%。外部元素应该position:relative;允许在其中进行绝对定位。

对于内容元素，它们都可以是width:50%; height:100%. 您需要做的是确保正确的人得到特殊left:50%待遇。

HTML

<div id="outer">
    <div class="content left">xx</div>
    <div class="content right">xx</div> 
</div>

CSS

body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */

这种方法允许比您以前使用的更清洁和更灵活的 CSS。奖励互联网积分！

于 2013-01-08T03:18:38.623 回答
0

将溢出属性更改为 hidden( overflow:hidden;) 然后将 #outer 的边距更改为margin:2.5% 5%;. 这是完整的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
    overflow:hidden;
}
        #outer {
            width: 90%;
            height: 90%;
            background-color: #333;
            margin: 2.5% 5%;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

希望它会工作！

于 2013-01-08T03:35:36.467 回答
-1

这似乎是由边距折叠出错引起的。添加padding:0.01px到<body>它，它应该像它一样工作。

如果你想在屏幕上显示固定大小的东西，你可能应该position:fixed像这样使用：

#outer {
    position:fixed;
    left: 5%; right: 5%; top: 5%; bottom: 5%;
    background:#333;
}
#left-content {
    position:absolute;
    left:0; top: 0; width:50%; bottom: 0;
}
#left-content {
    position:absolute;
    left:50%; top: 0; width:50%; bottom: 0;
}
于 2013-01-08T03:16:36.497 回答