首页 文章

高度100％填充填充

提问于
浏览 次
2

我有一个设置要求div填充100％的屏幕，边距为10px . 在其中，顶部有一个导航窗格，后面是一个内容div，下面有一个填充和一个带有填充的内部内容潜水 . 但是，使用父级的100％高度然后添加边距/填充将div拉伸到100％边距填充 . 有没有解决这个问题？我注意到绝对定位技巧，但是如果我绝对定位我的内容div，那会弄乱其他div的流程 . 它还使调整大小和流动非液体 . 任何方式来保持这些东西仍然实现我的目标，最好是使用CSS而不是javascript？

代码如下：

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="test.css" />
</head>
<body>
    <div id="wrapper">
        <div id="navigation">
        </div>
        <div id="content">
            <div id="inner">

            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body
{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    background-color:Black;
}
#wrapper
{
    height:100%;
    margin:10px;
    background-color:Blue;
}
#navigation
{
    height:100px;
    background-color:Green;   
}
#content
{
    height:100%;
    padding:10px;
    background-color:Orange;
}
#inner
{  
    height:100%;
    width:100%;
    padding:5px;
    background-color:Lime;
}
css html height

2 回答

  • 0

    您可以尝试将 box-sizing:border-box 添加到要同时具有100％高度和填充的任何元素上 .

    适用于IE8和良好的浏览器，因此浏览器支持实际上相当不错

    http://css-tricks.com/box-sizing/

    回复于
  • 16

    你可以尝试两件事......

    1）将包装，导航，内容和内部的高度改为98％ .

    2）尝试向包装器和其他元素添加透明的1px实线边框 . 这通常会将边际转移到元素的边际关系 .

    希望这可以帮助

    回复于

相关问题