邊框不顯示

考慮這個簡單的標記：邊框不顯示

<body> 
<div style="border: 2px solid navy; position:absolute; width:100%; height:100%"> 
</div> 
</body>

在我測試過的瀏覽器（Firefox和Chrome），右邊和底邊框的部分似乎就在窗口區域之外，因爲它們不可見。我應該如何修正我的標記或樣式表，以便在div佔據整個可用區域（即其大小爲100％/ 100％或等效）時div的邊框完全可見？

來源

2009-08-30 dpq

由於邊框位於元素寬度之外，因此如果您的身體寬度爲100％，則邊框將超出該寬度，因此不可見。看看盒模型：

alt text http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png

要爲你的頁面邊框，只是不定義寬度和高度：

body 
{ 
    border: 2px solid navy; 
}

另一種方法是，以做一個人造邊框，將HTML背景顏色設置爲邊框顏色，添加一些填充，然後將您的主體設置爲正常頁面背景顏色：

html 
{ 
    background-color: navy; 
    padding: 2px; 
} 
body 
{ 
    background-color: #fff; 
}

或者，如果你是想做到這一點使用div：

<body> 
    <div class="containerDiv"> 
    <div class="theDiv"> 
     Content here. 
    </div> 
    </div> 
</body> 

... 

div.containerDiv 
{ 
    background-color: navy; 
    padding: 2px; 
} 
div.theDiv 
{ 
    width: 100%; 
    height: 100%; 
    background-color: #fff; 
}

來源

2009-08-30 06:08:51

提問者的示例代碼和問題是有關設置DIV。 – random 2009-08-30 06:11:20

感謝e.c.ho，我添加了更多的代碼來直接回答他的問題。 – 2009-08-30 06:15:03

@Jaffar，看一下'div'解決方案的帖子末尾。 – 2009-08-30 06:15:33

回答

相關問題