Div與文本不垂直拉伸內部包裝

我有一個包裝內部標題，左列和主要內容。外包裝我得到了頁腳。Div與文本不垂直拉伸內部包裝

我的問題是，主要內容，如果沒有足夠的文本，不會延伸到頁面的底部。如果我插入lorem ipsum等，很多行都沒問題，但如果我嘗試只有幾行，主要的div停止在包裝的最後（或更好的，頁面的結尾，在頁腳之前）。

這裏是我的html代碼

<?php session_start(); 
unset($_SESSION['message']); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="../css/stili.css" type="text/css" /> 
<script type="text/javascript" src="../script/scripts.js"></script> 

<meta charset="utf-8"/> 
<title></title> 
<style> 

</style> 
</head> 
<body> 
<div id="wrapper"> 

<div id="header"> 
    <?php 
    include('../php/header.php'); 
    ?> 
</div> 

<div id="leftcolumn"> 
<?php 
    include('../php/leftcolumn.php'); 
?> 
</div> 
<div id="main" >Welcome to our site 

...Some text, but not enough to stretch to the end of page... 


</div> 
     <div style="clear: both"></div> 
</div> 

<div id="footer">Copyright 2013</div> 

</body> 
</html>

而這裏的CSS

html, 
body { 
padding:0; 
margin:0; 
height:100%; 
} 

#wrapper { 
min-height:100%; 
height:auto; 
margin:0 auto -30px; 
width:950px; 
background-color:#E3AA56; 

} 

#main { 
float:right; 
width:680px; 
padding:10px; 
background:#E0CD90; 
text-align:justify; 
overflow: auto; 

} 

#main a{ 
font-size:40px; 
} 

#footer{ 
border-top: 2px solid #CCCCCC; 
width:950px; 
margin:auto ; 
height:30px; 
background:#ee5; 
clear: both; 
}

的意見感謝大家，這將有助於發現問題！

來源

2013-05-13 Sanci

爲什麼給我們這麼多的CSS，如果只有一小部分很重要？ ;）這讓人們很難幫助你。考慮縮小你的代碼樣本。 – 2013-05-13 22:02:39

對不起，你是對的。我編輯了CSS並留下了最重要的部分，主要，包裝，主體和頁腳 – Sanci 2013-05-13 22:18:26

這是你想要的樣子嗎？如果沒有，請讓我知道，我會修改我的答案。

更新： -

#main { 
height:100% 
} 

#wrapper { 
height:100% 
} 
#leftcolumn { 
padding:10px; 
height:100%; 
}

這應該工作。

更新2： -

#main { 
height:100%; 
} 

#wrapper { 
height:100%; 
overflow:hidden; 
min-height:500px; (you can change this to your liking) 
} 

#footer { 
position:relative; 
}

這應該給你你所期望的結果。無需添加我以前的樣式，現在就使用這個樣式。

來源

2013-05-13 22:07:28

嗯，主div不應該默認設置，因爲理論上它可能會在頁面間發生變化。我不僅將這種佈局用於主頁，而且還用於其他頁面。如果我設定一個高度，我會限制內容，我可以放在那裏...對嗎？ – Sanci 2013-05-13 22:14:09

請看看我更新的答案，只更改我在那裏指定的東西:) 此外，即使您嘗試使用不同的分辨率，佈局也保持不變！ – 2013-05-13 22:41:01

現在將主高度設置爲100％，導致主div超過頁腳：/ – Sanci 2013-05-13 22:47:48

將頁面拆分爲多個自動伸展視口高度的列是一個持續的主題。就谷歌而言，那裏有幾個基於CSS的解決方案。

問題是，周圍框的高度是未定義的（html，body，wrapper在你的情況下）。如果父母上還有一個尺寸，則只能添加一些「樣式」。

一個weired的解決方案是，設置HTML對象的樣式：

<html style="overflow:hidden;clip: 
      rect(auto);height:100%;;margin:0px;padding:0px; 
      background-color:white;">

（是的，它不禁止，你可以做到這一點，證明它甚至IE 6和IE 7 ...）和

#wrapper { 
min-height:100%; 
height:100%'; 
margin:0 auto -30px; 
width:950px; 
background-color:#E3AA56; 
overflow: hidden; /* not sure if you want that */ 
}

來源

2013-05-13 22:22:42

嗯，你的建議並沒有解決我的問題，也許我解釋我的問題很好。我想要主div直到頁面結束，而不是以文本結束，在div下留下空白並顯示包裝：/ – Sanci 2013-05-13 22:39:42

這裏是鍵您的問題，你應該看看和落實但是你想：

html, body { 
height: 100%; 
min-height: 100% /* for firefox */ 
} 

#wrapper, #leftcolumn, #main { 
height: 100%; 
}

來源

2013-05-13 22:27:07 Xarcell

你不需要在包裝中添加高度它會根據包裝內的內容獲得高度:)

來源

2013-05-13 23:36:08 edonbajrami

Div與文本不垂直拉伸內部包裝

回答

相關問題