HTML中的容器大小？

编辑：我改变.firstlayer的位置，以绝对的解决了这个。这使得设置左/右边距自动不能使容器居中，所以我设置了left：0;和右：0;当我定义宽度并将其标记为重要时，它将容器居中。感谢大家的帮助！HTML中的容器大小？

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

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

我有一个非常愚蠢的问题。我正在一个网页上工作，我试图让一个<span>区域一直延伸到页面的底部。我在网上寻找答案，而且我确信伊赛特身体和HTML高度为100％和容器高度自动/最小高度为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>

来源

2012-06-14 Lee

尝试删除'span {height：auto; }'line – Hope4You

如果我理解正确，你试图让媒体容器根据窗口大小扩展它的高度吗？ – Keith

你应该使用'div'来代替'span'。 'div'是合适的包装容器，因为它们是“块”级元素。'span'不适合包装容器，因为它们是“内联”元素。参见[W3规范]（http://www.w3.org/TR/html401/struct/global.html#h-7.5.4）。 – Sparky

这里亚去。尽量不要使用<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>

希望这有助于！

来源

2012-06-14 23:46:04 Epik

谢谢你的尝试，但这不适合我。我不明白你的关于“尝试使用标签但将其改为标签”的句子，所以我没有尝试 - 你能澄清一下吗？为了考虑不同的浏览器，我设置了高度 - 现代浏览器将第一个标记为重要，而旧版浏览器（*咳嗽IE6 *）忽略重要并且不理解最小高度。这样 - 至少在理论上，过去它对我来说很有用 - 它与几乎所有东西都兼容。 – Lee

@李在那句话里有没有显示出来的非转义标签 - 是固定的。 –

-1

我真的不会太担心IE6，因为大多数人/公司这几天都从支持这个搬走。我工作的公司已经因为它太旧了（在Windows XP之前，2001）。

而不是使用span标签使用div标签，因为如果你想在后面添加HTML5它是更多样化，然后跨度标签。

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

让我知道你如何去，如果它保持了，请张贴你所得到的截图，所以我可以比较和测试。

来源

2012-06-15 00:44:37 Epik

我试过了，它似乎没有效果。我也拿出了所有额外的身高限制，但那也没有做任何事。我会尽量在一分钟内做出一些截图。 – Lee

好的，截图已经结束。 – Lee

-1为你的弱答案和使用短信速记。 – Sparky

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

不完全确定您是否已将任何clearfixs包含到您的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可能看起来并不是必要的，因为容器将始终填充窗口的整个高度。但是，如果您的内容是动态的，您将继续向容器中添加更多列，那么容器可能无法注册新的浮动列，并且您将再次以方块1结束。

所以基本上，什么正在这里做的是，你首先需要添加clearfix使容器识别浮动子元素的存在，然后将容器定位为绝对的第一使用height:100%或一些较小的类似height:90%释放前你的黑色页脚必不可少的空间。

我已经把的jsfiddle的示例代码，供大家参考 - http://jsfiddle.net/qmHzC/

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

希望这会有所帮助！

编辑：经过一番思考，我强烈的觉得，这个问题更多的是因为缺乏一个clearfix。将容器定位为绝对将阻止您使用margin:0 auto将容器集中在视口的中心。此外，容器只能流到黑色页脚的顶部，而不是窗口的底部。因此，白色容器的真实高度应该只与其内容的价值以及顶部或底部填充物一样多。为了达到这个目标，clearfix解决方案应该可以自行完成。我不会编辑position:absolute部分，因为它可能有助于那些正在考虑使div不继承窗口高度和宽度而不使用jQuery的人。

来源

2012-06-15 15:26:15 vynx

HTML中的容器大小？

回答

相关问题