如何控制容器高度？

我有两个容器。一个完整内容（容器1），然后在右侧，我有一个包含用户信息（容器2）的框：如何控制容器高度？

当我向容器中添加内容时，如果内容长度超过高度，内容会持续超出容器。所以我决定增加高度：auto;但是，这会弄乱Container2的表现。有什么我可以做，以确保他们保持一致？

代码

<div id="container"> 

<h1>$nameis</h1> 

Here will be the content that will be longer and shorter on certain pages. 

</div> 
<div id="container2"> 
<div id="welcoming"> 
<input id="search"> 
<h3><?php echo $angelinajolie;?></h3> 
<h3><a href="/lastlogin.php">Logins</a></h3> 
<h3><a href="/stats.php">Stats</a></h3> 
</div> 
</div>

CSS

div#container { 
background-color: #FFFFFF; 
margin:0 auto; 
height: 300px; 
width:60%; 
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica, sans-serif; 
border:0px solid #FFFFFF; 
margin-top:25px; 
font-size:15px; 
color: #222222; 
margin-left:60px; 
    } 

#container2 { 
margin:0 auto; 
height: 80px; 
width:20%; 
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica, sans-serif; 
border:0px solid #FFFFFF; 
margin-top:25px; 
font-size:15px; 
color: #E1E1E1; 
margin-left: 70%; 
margin-top:-317px; 
}

来源

2011-01-23 AAA

化妆容器height: 100%和overflow:hidden

来源

2011-01-23 16:31:17 Abudayah

height:200px; 
    overflow-y:scroll; 
    overflow-x:hidden;

显示时滚动条的容器溢出。（仅在高度方向）

height:200px; 
    overflow:hidden;

显示没有滚动条。

UPDATE：用PHP裁剪文字：

if (strlen($text) > 200){ 
    $text= substr($text, 0, 200); 
    $text= $text."..."; 
}else{ 
    $text; 
}

UPDATE2：这是一个例子CSS代码我使用。我不擅长动态高度艰难...所以也许有人可以做出更好的脚本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My website title</title> 
<style> 
body { 
    position: fixed; 
    text-align:center; 
    width: 100%; 
} 
#wrapper { 
    text-align:left; 
    margin-left:auto; 
    margin-right:auto; 
    width:980px; 
    height:100%; 
    position: relative; 
} 
#content { 
    position:absolute; 
    top: 40px; 
    left:20px; 
    width:712px; 
    height:100%; 
    overflow-y:scroll; 
    overflow-x:hidden; 
    padding-right:16px; 
} 
#sidebar{ 
    width: 196px; 
    position:absolute; 
    right:20px; 
    top: 40px; 
} 

.sidebox{ 
    margin-bottom: 32px; 
    position:relative; 
} 

</style> 
<?php 
$username = 'Mr. AAA'; 
$angelinajolie = 'Angelina is cool';?> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="content"> 
     <h1>Welcome to the site <?php echo($username); ?></h1> 
    </div> 
    <div id="sidebar"> 
     <div class="sidebox"> 
      <h1>Search my site:</h1> 
      <form action="/search.php"> 
      <input type="text" name="search" /><input type="submit" /> 
      </form> 
     </div> 
     <div class="sidebox"> 
      <h1>My account info</h1> 
      <p>Username: <?php echo($username); ?></p> 
      <p>Last login: <?php echo($lasttime); ?></p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

来源

2011-01-23 16:31:23 SuperSpy

好的。我需要第二种选择，但问题是内容被吃掉了。我不想使用滚动条。我正在显示搜索结果，因此只显示符合200px的高度的结果... – AAA 2011-01-23 16:39:44

尝试使用容器的overflow属性进行试验，以便在容器超出其容器大小的情况下将滚动条添加到容器。请参阅demo

来源

2011-01-23 16:34:37 Alik

您也可以使用浮动属性。在此示例中：http://jsfiddle.net/3hnc7/ container1的高度遵循文本的高度，而不会打扰container2。

来源

2011-01-23 16:40:04 CronosS

如何控制容器高度？

回答

相关问题