html - HTML中的容器大小？

Question

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

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

可以在这里找到带注释的屏幕截图：（我现在只是在做布局，所以看起来很傻）。上衣看起来不错底部没有

我有一个非常愚蠢的问题。我正在处理一个网页，我试图让一个<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>

score 1 · Accepted Answer

给你。尽量不要使用<span>标签，而是将其更改为<div>标签。它们更健壮，有时它们无缘无故地不起作用......而且你也设置了太多的高度变量。基本上当你有： height: auto !important; 最小高度：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>

希望这可以帮助！！

score 1 · Accepted Answer

我注意到您有几个跨度类设置为float:left. 我假设您已采纳 Epik 的建议，将它们改为 div。

不完全确定您是否在 HTML 中包含了任何 clearfixes，因为您提供的代码示例是部分的，并且考虑到您的屏幕截图表明主容器或包装器甚至不涉及包含它们的浮动子元素的存在，它可能是没有任何清除修复。您可能希望首先通过在浮动元素之后添加 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%或者height:90%为您的黑色页脚释放必要空间.

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

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

希望这可以帮助！

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

score -1 · Accepted Answer

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

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

基本上它适用于我通过删除 height:auto 和 height:100% 来设置最大和最小高度。

让我知道你的情况，如果它跟上，请发布你得到的截图，以便我进行比较和测试。

html - HTML中的容器大小？

3 回答 3

Related

Reference