HTML中的容器大小？

时间：2012-06-14 23:27:53

标签： html css

编辑：我通过将.firstlayer的位置更改为绝对来解决此问题。这使得设置左/右边距自动无法使容器居中，所以我设置左：0;和右：0;当我定义宽度并将其标记为重要时，将容器居中。谢谢大家的帮助！

为了澄清，我正试图将其扩展到页面底部。到目前为止，我所有的尝试都没有成功。此外，所有高度属性都在.firstlayer中，以实现浏览器兼容性。

可以找到带注释的屏幕截图here :(我现在只是做布局，所以看起来很傻）。 Top looks fine Bottom doesn't

我有一个非常愚蠢的问题。我正在开发一个网页，我正试图让<span>区域一直延伸到页面底部。我在网上搜索了答案，我确保将机身和html高度设置为100％，将容器高度设置为auto / min-height为100％，但它仍然只能到达分页符。

有人对如何解决此问题有任何建议吗？

我的CSS在这里：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    border:0 none;
    font:inherit;
    margin:0;
    padding:0;
    }

html, body { width:100%; height:100%; }

body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; }



    /*----- GRID -----*/
.container {
    background: none;
    overflow: none;
    display: block;
    z-index: 1;
    } 

.firstlayer { 
    background-color: #fff !important;
    height: auto !important; 
    min-height: 100%; 
    height: 100%;
    width: 960px; 
    margin:0 auto;
    border-left: solid 1px #000;  border-right: solid 1px #000;
    }

.padded  {margin-left:20px; margin-right:20px;}

span { height:auto; }
    .onecol { width:8.33%; float:left; }
    .twocols { width:16.66%;  float:left; }
    .threecols { width:25%;  float:left; }
    .fourcols { width:33.33%;  float:left; }
    .fivecols { width:41.66%;  float:left; }
    .sixcols { width:50%;  float:left; }
    .sevencols { width:58.33%;  float:left; }
    .eightcols { width:66.66%;  float:left; }
    .ninecols { width:75%; float:left;  }
    .tencols { width:83.33%;  float:left; }
    .elevencols { width:91.66%;  float:left; }
    .allcols { width:100%;  float:left; }

footer {
    font-size: 0.75em;
    color: #fff;
    background: 100px #000;
    padding:10px 20px 10px 20px;
    bottom: 0px; 
    height:7em;  
    }

我的HTML代码在这里：

    <!--Begin the content area-->

    <span class="container firstlayer">
        <span class="container  padded">

<!--TITLE AND SUBTITLE-->
            <span class="container allcols">
                <h1>Stand-in Title</h1>
                <h1 class="subtitle">Stand-in Subtitle</h1>
            </span>

<!--MEDIA PLACEHOLDER-->
            <span style="height:400px; background-color:#000;" class="container allcols">
            </span>

<!--ROW ZERO: 2 COLS-->
            <span class="allcols" style="padding-top:1em;"> 
                <span class="container sixcols">
                    <h2>Subtitle</h2>
                    <p> Lorem ipsum </p>
                </span>
                <span class="container sixcols">
                    <h2>Subtitle</h2>
                    <p> Lorem ipsum </p>
                </span>
            </span>  

        </span>
    </span>

3 个答案:

答案 0 :(得分：1)

你好。尽量不要使用<span>标记，而是将其更改为<div>标记。它们更加强大，并且有时它们不起作用......而且你也设置了太多的高度变量。基本上当你有：     身高：自动！重要;     最小高度：100％;     身高：100％; 他们都互相矛盾。更简单的是你通常更好地过度思考它：）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
html, body, div, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    border:0 none;
    font:inherit;
    margin:0;
    padding:0;
    }

html, body { width:100%; height:100%; }

body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; }

    ...

    /*----- GRID -----*/
.container {
    background: none;
    overflow: none;
    display: block;
    z-index: 1;
    } 

.firstlayer { 
    background-color: #fff !important;
    min-height: 100%;
    max-height:100%;
    width: 960px; 
    margin:0 auto;
    border-left: solid 1px #000;  border-right: solid 1px #000;
    }

.padded  {margin-left:20px; margin-right:20px;}

div { height:auto; }
    .onecol { width:8.33%; float:left; }
    .twocols { width:16.66%;  float:left; }
    .threecols { width:25%;  float:left; }
    .fourcols { width:33.33%;  float:left; }
    .fivecols { width:41.66%;  float:left; }
    .sixcols { width:50%;  float:left; }
    .sevencols { width:58.33%;  float:left; }
    .eightcols { width:66.66%;  float:left; }
    .ninecols { width:75%; float:left;  }
    .tencols { width:83.33%;  float:left; }
    .elevencols { width:91.66%;  float:left; }
    .allcols { width:100%;  float:left; }

footer {
    font-size: 0.75em;
    color: #fff;
    background: 100px #000;
    padding:10px 20px 10px 20px;
    bottom: 0px; 
    height:7em;  
    }
</style>

</head>

<body>


 <div class="container firstlayer">
        <div class="container  padded">

<!--TITLE AND SUBTITLE-->
            <div class="container allcols">
                <h1>Stand-in Title</h1>
                <h1 class="subtitle">Stand-in Subtitle</h1>
            </div>

<!--MEDIA PLACEHOLDER-->
            <div style="height:400px; background-color:#000;" class="container allcols">
            </div>

<!--ROW ZERO: 2 COLS-->
            <div class="allcols" style="padding-top:1em;"> 
                <div class="container sixcols">
                    <h2>Subtitle</h2>
                    <p> Lorem ipsum </p>
                </div>
                <div class="container sixcols">
                    <h2>Subtitle</h2>
                    <p> Lorem ipsum </p>
                </div>
            </div>  
        ... 
        </div>
    </div> 
</body>
</html>

希望这会有所帮助!!

答案 1 :(得分：1)

我注意到你有几个span类设置为float:left。我假设你已经采取了Epik的建议，将其改为div。

不完全确定您是否在HTML中包含任何明确修正，因为您提供的代码示例是部分的，并且考虑到您的屏幕截图表明主容器或包装器甚至没有关于要包含的浮动子元素的存在他们可能没有任何明确的修正。您可能希望首先通过在浮动元素之后添加clearfix来解决该问题，然后再继续尝试获取有问题的div来填充屏幕。像这样：

<强> HTML 

<div id="container">
    <div id="col1" class="col">1</div>
    <div id="col2" class="col">2</div>
    <div id="col3" class="col">3</div>
<div class="clearfix"></div>
</div>

<强> CSS 

body{
    background:#333333;
}

#container{
    width:100%;
    height:100%;
    position:absolute;
    background:#ffffff;
    top:0;
    left:0;
}

.col{
    float:left;
    width:30%;
    margin-right:30px;
    background:#cccccc;
    color:#333333;
}

.clearfix:before, .clearfix:after { 
    content: ""; 
    display: table; 
}

.clearfix:after { 
    clear: both; 
}

.clearfix { 
    zoom: 1; 
}

您会在上面注意到我已将position:absolute添加到#container。这是因为如果您不这样做，height:100%定义将不起作用。在这种情况下，clearfix似乎不是必要的，因为容器将始终填充窗口的整个高度。但是，如果您的内容是动态的，您将继续向容器添加更多列，则容器可能无法注册新的浮动列，并且您将再次以方块结束。

所以基本上，这里要做的是你首先需要添加一个clearfix来使容器识别浮动子元素的存在，然后在使用height:100%之前将容器置于绝对位置，或者更像{{ {1}}为你的黑色页脚腾出必要的空间。

我已将示例代码放在jsFiddle中供您参考 - http://jsfiddle.net/qmHzC/

您注意到我已将height:90%设置为body。这是作为控件来测试代码。从background:#333333移除position:absolute，您会看到容器不再占据整个窗口，并会显示正文较暗的背景。除了绝对定位之外，您还可以尝试在浮动的子元素之后删除#container并且您会看到白色容器不再识别浮动的子元素并立即消失，就好像它什么都没有

希望这有帮助！

编辑： 经过一番思考，我强烈认为问题更多是因为缺少一个clearfix。将容器定位为绝对容器将阻止您使用<div class="clearfix"></div>将容器集中在视口的中心。此外，容器应该仅向下流到黑色页脚的顶部而不是窗口的底部。因此，白色容器的真实高度应该只有它的内容的价值加上任何顶部或底部填充。要实现这一点，clearfix解决方案应该独立工作。我不会编辑margin:0 auto部分，因为它可能对那些想要使div继承窗口的高度和宽度而不使用jQuery的人有所帮助。

答案 2 :(得分：-1)

我真的不会太担心IE6，因为现在大多数人/公司都不再支持IE6。我工作的公司已经因为它太旧了（Windows XP之前，2001年）。

使用div标签而不是使用span标签，因为如果你想在HTML5中添加它，那么它会比span标签更加多样化。

基本上它适用于我设置最大和最小高度与删除高度：自动和高度：100％。

让我知道你是怎么去的，如果它继续，请发布你所得到的截图，以便我可以比较和测试。

相关问题
最新问题