容器高度問題HTML/CSS

我希望容器（紫色邊框）的大小與主要內容一起增長，所以我可以在其周圍放置邊框，使其看起來像側邊欄（藍色邊框）是全高。容器高度問題HTML/CSS

<div id="container"> 
    <section id="mainContent"> 
     <h1>title here</h1> 
      <img src="images/jayzmchg.jpg"></img> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. 
      Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
      a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
      cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
      ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
      venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
      ligula scelerisque hendrerit.</p> 
    </section> 

    <div id="sidebar"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div> 

<footer id="footer"> 
     <p></p> 
</footer>

上面是HTML，以下是CSS

#container { /* purple border */ 
height: 250px; 
margin: 0 auto; 
max-width: 1000px; 
border: 1px solid #FF00FF; 
    } 

#mainContent { /*red border */ 
float: left; 
width: 700px; 
border: 1px solid #FF0000 
    } 

#sidebar {/*blue border */ 
width: 294px; 
float: right; 
border: 1px solid #0000FF; 
    }

香港專業教育學院的容器設置高度爲250像素，所以你可以看到它，我用盡其設置爲100％，但只是不顯示任何即時消息猜測這是因爲它沒有內容，但我怎麼能讓它這樣做，就好像mainContent內部的東西是它的高度。

enter image description here

添加溢出：隱藏到容器導致此 enter image description here

來源

2013-07-23 box

放一個float:left;上的#container。

把overflow:hidden;上的#container清除內部浮動。

例小提琴：http://jsfiddle.net/3jNTv/

克里斯Coyier寫了一個偉大的職位約在這裏： http://css-tricks.com/all-about-floats/

來源

2013-07-23 11:42:24 seemly

溢出：隱藏以下因素導致出現（查看編輯到主後），你可以看到它切斷文本上mainContainer上 – box

的底部我的壞我已經離開了對於前面的例子，height：250px，對不起！謝謝您的幫助：） – box

嘗試設置高度爲heigh: 100%;？

來源

2013-07-23 11:48:06 butterbox

試試這個，看到活生生的例子：

link

height: auto !important;

來源

2013-07-23 11:53:32

我添加了一個類floClear並添加一個div。它會正常工作。

CSS 

#container { /* purple border */ 

    margin: 0 auto; 
    max-width: 1000px; 
    border: 1px solid #FF00FF; 
} 

#mainContent { /*red border */ 
    float: left; 
    width: 700px; 
    border: 1px solid #FF0000 
} 

#sidebar {/*blue border */ 
    width: 294px; 
    float: right; 
    border: 1px solid #0000FF; 
} 

.floClear 
{ 
    clear:both; 
}

HTML

<div id="container"> 
    <section id="mainContent"> 
     <h1>title here</h1> 
      <img src="images/jayzmchg.jpg"></img> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. 
      Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
      a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
      cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
      ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
      venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
      ligula scelerisque hendrerit.</p> 
    </section> 

    <div id="sidebar"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div class="floClear"></div> 
</div> 

<footer id="footer"> 
     <p>Test</p> 
</footer>

來源

2013-07-23 11:57:48 Rehman

容器高度問題HTML/CSS

回答

相關問題