關於特種部隊的第一個問題,如果這可能是一個愚蠢的問題,請溫和。 :) 沒有找到一個解決方案,既不在這裏也不在網上。CSS:如何定義具有無限垂直邊框和初始高度爲100%的居中div?
我在CSS上遇到了一些麻煩。我粘貼我的代碼在這篇文章的結尾,但第一個病人解釋我試圖完成什麼:
我想建立一個無限的垂直圖形邊界的固定寬度的內容區域的左側和右側。
這是我的嘗試:
我創建了一個#內容 DIV與.wrapper DIV中。標準程序中心一個div ID說。給了#內容左邊框的背景屬性和.wrapper div右邊的背景。 #內容作品罰款:無盡的左邊框。 但是。包裝器保持與其內容相同的高度。因此,如果內容較少,那麼瀏覽器高度的邊界不會是無止境的。
如果我將內容高度設置爲100%,邊框將顯示在頁面底部,但如果內容高於瀏覽器高度,則向下滾動邊框不會繼續。
我插入#內容和.wrapper之間的另一個DIV:#contentbr並給該div相同propertys爲#內容但正確的邊界圖形:不會工作,高度保持一樣的內容包裝。
嘗試了一些較小的調整,但都沒有找到我想要的方式。
可悲的是:Nr。如果我將#content的背景屬性設置爲: _background:url(img/content_left.png)左上角repeat-y,url(img/content_left.png)右上角重複-y; _
可悲的是IE完全不認識CSS 3,所以這是我不能忽視IE無解.. :(
這樣的IM希望你們有一定的幫助。有人已經知道如何做到這一點的魔術。
關於我的HTML的重要通知& CSS示例: 我用border-properties替換了background-properties。實際上,左邊界和右邊界需要兩個不同的圖像,並使用評論的backround屬性!
HTML & CSS:
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
html, body { height: 100%; }
#content
{
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
#content .wrapper
{
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this is just for the example */
border-right: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
padding: 0px 70px;
}
</style>
</head>
<body>
<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim,
vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus
accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in
rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque
id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus,
auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin
sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum.
Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
</body>
</html>
感謝您的回答,但正如我在我的帖子中所說:邊界需要兩個左右兩個不同的圖形。我爲這個例子用border-properties替換了background-properties。 – hanboh 2010-09-21 14:09:08
我剛剛在半分鐘之前就已經明白了。但我找到了一個解決方案:只需將#content設置爲'position:relative',將#wrapper設置爲'position:absolute'。這允許100%的高度適用於兩個div。我更新了鏈接頁面。 – 2010-09-21 14:19:25
太棒了,它的工作原理!如果您更新答案,請將其標記爲接受的答案。 – hanboh 2010-09-21 14:31:17