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中的容器大小？

回答

相關問題