獲取有關主要格（或機構）

http://designobvio.us/vodka/現場演示獲取有關主要格（或機構）

我已經把我的HTML，集裝箱，主要和100％，但nomatter我做什麼我不能得到的邊界是一個100％的高度/寬度邊界沒有滾動條的100％高度？

我該如何達到效果？

HTML

<div id="main"> 

    </div>

CSS（目前不活的代碼，但是這是我試過）

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}

來源

2012-06-27 Matthew Harwood

你正在尋找一個固定的邊界或動態的邊界？您的代碼存在的問題是W3C盒式模型。在默認模型中，填充，邊距和邊框被添加到元素的大小。所以在你的代碼中，你真正告訴它的是「使框100％，然後添加10px的邊框」。

通常一個簡單的變化是手動開關盒模型，但不幸的屬性不與height: 100%發揮好。所以，你有幾種選擇：

1）如果你正在尋找一個固定的邊界，這是一個好招：http://css-tricks.com/body-border/ 2）如果你需要一個動態的邊界，你需要周圍的額外高度邊界以某種方式得到補充道。這裏有一種方法：

html,body { height:100%; padding: 0; margin: 0; } 
#container { 
    min-height:100%; 
    border-right: 5px solid #000; 
    border-left: 5px solid #000; 
    position: relative; /* relative postion so we can absolutely position footer within it */ 
} 
#header { 
    height: 100px; 
    border-top: 5px solid #000; 
    background-color: red; 
} 
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/ 
#footer { 
    height: 100px; 
    border-bottom: 5px solid #000; 
    background-color: blue; 
    position: absolute; 
    bottom: 0; 
    width: 100%; /* with absolute position, a width must be declared */ 
}

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

的jsfiddle這裏：http://jsfiddle.net/Qw2cb/

來源

2012-06-27 06:58:20

所以，你說你不想顯示滾動條？

CSS：

#main 
{ 
    overflow: hidden; 
    height: 100%; 
    position: absolute; 
    margin: 0px; 
}

來源

2012-06-27 03:08:55

默認情況下邊界，margin和padding都沒有寬度/高度的一部分，並在上面添加。這就是爲什麼你得到滾動條，因爲框的全部尺寸是100％的高度和寬度加上邊框寬度。

可以設置box-sizing屬性border-box，它告訴瀏覽器包括用於在寬度/高度特性的邊界和填充（以content-box在相反，這是默認值）的計算：

#main { 
    box-sizing: border-box; 
    [...]  
}

由於特別是IE8和早期版本的瀏覽器的其他家庭的不支持這種CSS屬性，這是一個好主意，添加一些特定瀏覽器的定義，也：

#main { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing:  border-box; 
    box-sizing:  border-box; 
}

鉭可以看看mozilla doku for detailed information on box-sizing。

來源

2012-06-27 07:10:09 acme

我知道這是一個古老的職位，但因爲谷歌第一頁上彈出...這裏是我的解決方案，似乎很好地工作跨瀏覽器：

height: 0: 
border-style: solid; 
border-width: 8vw 0 0 100vw; 
border-color: transparent transparent transparent red;

只是用它的：after僞元素，以便把它在一個三角形的形狀和它工作得很好（測試下來到IE10）。

只需使用100vw而不是100%，它應該做的伎倆。

來源

2017-09-26 14:48:04 daneczech

是的，這在2012年不存在了。很好的回答tho –

的確，我知道。認爲這可能對別人有幫助！ – daneczech

你可以給box-size:border-box;爲「主」，像

#main{ 
    box-size:border-box; 
}

這樣做的邊框將被添加到主100％的高度。 Learn more about box sizing here

來源

2017-09-26 14:59:19

獲取有關主要格（或機構）

回答

相關問題