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与文本不垂直拉伸内部包装

回答

相关问题