Question

我很遗憾不断询问相同问题的版本，但这似乎很难实现。这是我到目前为止的代码：

<!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％而不是滚动条。

找到fiddle here。

Answer 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％的宽度，将导致5％的边距为90％的5％，而不是预期的100％，这会导致“错误”。 - 同样适用于填充。

Answer 2

试试这个：

body, html{
        height: 100%;
        margin: 0;
    }
    #outer {
        width: 90%;
        height: 90%;
        position: absolute;
        margin: 5%;
        background-color: #333;
    }

Answer 3

我会这样做：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。奖励互联网点！

Answer 4

将overflow属性更改为隐藏（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>

希望它能运作！

Answer 5

这似乎是由于保证金崩溃出错造成的。将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;
}

如何在其中放置带有两个DIV的DIV，以便DIV填满我屏幕的90％？

5 个答案: