2010-09-21 31 views
4

關於特種部隊的第一個問題,如果這可能是一個愚蠢的問題,請溫和。 :) 沒有找到一個解決方案,既不在這裏也不在網上。CSS:如何定義具有無限垂直邊框和初始高度爲100%的居中div?

我在CSS上遇到了一些麻煩。我粘貼我的代碼在這篇文章的結尾,但第一個病人解釋我試圖完成什麼:

我想建立一個無限的垂直圖形邊界的固定寬度的內容區域的左側和右側。

這是我的嘗試:

  1. 我創建了一個#內容 DIV與.wrapper DIV中。標準程序中心一個div ID說。給了#內容左邊框的背景屬性和.wrapper div右邊的背景。 #內容作品罰款:無盡的左邊框。 但是。包裝器保持與其內容相同的高度。因此,如果內容較少,那麼瀏覽器高度的邊界不會是無止境的。

  2. 如果我將內容高度設置爲100%,邊框將顯示在頁面底部,但如果內容高於瀏覽器高度,則向下滾動邊框不會繼續。

  3. 我插入#內容和.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> 

回答

2

我刪除了margin和padding的所有元素,以防止文檔邊緣和邊境之間的差距。

* { margin: 0; padding: 0; } 

要使用的#wrapper指定了100%的高度,以及爲#內容股利,使用這樣的:」

#content { position: relative } 
#wrapper { position: absolute } 

這就是我得到:

http://manson.revora.net/test.html

+0

感謝您的回答,但正如我在我的帖子中所說:邊界需要兩個左右兩個不同的圖形。我爲這個例子用border-properties替換了background-properties。 – hanboh 2010-09-21 14:09:08

+0

我剛剛在半分鐘之前就已經明白了。但我找到了一個解決方案:只需將#content設置爲'position:relative',將#wrapper設置爲'position:absolute'。這允許100%的高度適用於兩個div。我更新了鏈接頁面。 – 2010-09-21 14:19:25

+0

太棒了,它的工作原理!如果您更新答案,請將其標記爲接受的答案。 – hanboh 2010-09-21 14:31:17

1

的最小高度破解,據我所知,您需要把屬性按以下順序:

 
min-height: 100%; 
height: auto !important; 
height: 100%; 

也許我米錯了,但我確信這是唯一的解決辦法。

如果您在頁面中心有100%的高度div,爲什麼不創建可應用於身體的重複背景,或者是可以重複到最大尺寸的最外層容器可能的框?

或者,只需使用:

 
border: solid #000; 
border-width: 0 1px; 

你的外層div

+0

感謝您的回答。訂單的變化沒有做任何事情。是的,我在中心獲得了100%的高度div,但內容需要左右兩個不同的圖形邊界。正如我在文章中所說的,我只是爲了這個例子而用border-properties替換了background-properties。實際上,圖形邊界在左側和右側是不同的。 – hanboh 2010-09-21 14:04:17

+1

背景是身體的最佳方式,特別是如果您必須支持IE6。只要將背景設爲「center top repeat-y」,它就會跟蹤內容位置。 – 2010-09-21 14:07:01

+0

身體將有一個自己的背景屬性,因此不能用於此。 – hanboh 2010-09-21 14:19:43

1

改變了一下佈局

。包裝我刪除了所有的高度信息。

#內容我刪除了高度:auto!important;和外包身高:100%;* html #content {height:100%; } 略低於#內容.wrapper

現在,它的工作原理它應該(甚至圖形邊框)的方式。如果內容超過窗口高度,100%的初始高度和持續的邊界:

<!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; 

      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; 
      padding: 0px 70px; 
     } 

     * html #content 
     { 
      height: 100%; 
     } 
    </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> 
相關問題