0

我有一个要保存信息的容器（会定期更新）。但有时，我可能希望这些信息长或短，为此我的容器上不能有固定的高度，所以取决于它应该调整大小的文本/信息的数量。这是我的脚本。

HTML：

<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>

<!-- NAVIGATION --> 
<div id="nav-bar">
    <div id="nav-bar-title">LoL Champs</div>
    <ul>
    <li><a href="">Champs</a></li>
    <li><a href="">Info</a></li>
    <li><a href="">Guides</a></li>
    <li><a href="">Model Viewer</a></li>
    <li><a href="">Lists</a></li>
    </ul>
</div>
<!-- END NAVIGATION -->

<div id="main-body">
<div id="nav-body-divider"></div>

<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">

</div>

</div>

</body>
</html>

和 CSS：

/** MAIN PAGE CONFIG CSS **/

html, body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 1920px;
    max-height: 1050px;
    font-size: 100%;
}

html { 
  background: url(../images/JinxBG.jpg) 0 0 fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p {
    color: white;
}

a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/

/**NAVIGATION**/
#nav-bar {
    width: 100%;
    height: 10%;
    background-color: #A62D2D;
    position: fixed;
    box-shadow: 0px 2px 9px black;
    font-size: 100%;
    max-height: 10%;
    max-width: 100%;
}

#nav-bar-title {
    font-family: 'Sansita One';
    color: #262424;
    position: absolute;
    width: 20%;
    height: 100%;
    left: 0.3%;
    font-size: 1.8em;
    max-width: 16%;
    margin-top: 1.2%;
}

#nav-bar ul {
    list-style-type: none;
    color: #2E2C2C;
    font-family: 'Belleza';
    font-size: 1.5em;
    position: absolute;
    top: 0;
    max-width: 100%;
    max-height: 100%;
    left: 15%;
    line-height: 0%;
    margin-top: 0;
    margin-bottom: 10%;
    top: 50%;
}
#nav-bar li {
    margin-right: 45px;
    display: inline;
    height: 100%;
    -webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
    color: #C7C7C7;
    -webkit-transition: color 0.5s ease;
}

/** END NAVIGATION **/

/** MAIN TEXT BODY **/
#nav-body-divider {
    width: 100%;
    height: 1px;
    background: #B55050;

}

#main-body {
    max-width: 100%;
    max-height: 90%;
    background: #A62D2D;
    width: 70%;
    height: 100%;
    margin: auto;
    position: relative;
    top: 10%;
}

/** MAIN BODY NEWS **/

#home-body-title {
    font-size: 2.4em;
    font-family: Belleza;
    color: #C98A5D;
    position: relative;
    left: 3%;
    top: 0%;
}

#news-container {
    width: 45%;
    height: 40%;
    background: #CF4040;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    position: relative;
    left: 3%;
}

我想调整大小news-container以适应其中的内容数量，但仅在高度上调整大小。宽度应该保持不变。此外，如果 div 会更大，我如何移动将低于该 div 的对象以适应页面的更下方并为大容器腾出空间？

干杯，尼克

4

2 回答 2

1

你永远不应该为任何东西设定高度。始终让内容自然增长。http://jsfiddle.net/LQkj3/

<div id="news-container">
  <p>
    This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
  </p>
</div>


<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%;  padding: .5em 1em; }
</style>

...当然，除非您需要一个可滚动的容器（如@griegs 建议的那样）。;)

然后你可以放一个 max-width: 10em; 或类似的东西。

于 2013-10-23T23:58:39.897 回答
0 
<div style="width:200px; border: 1px solid black; max-height: 400px; overflow: scroll">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et iaculis dui, id dapibus nibh. Phasellus sollicitudin urna non elementum aliquam. Vivamus nec aliquet quam. Mauris eget sollicitudin tellus, at dictum tellus. Donec sed porttitor quam, in suscipit nisl. Praesent vestibulum auctor turpis quis vulputate. Quisque eget erat vel tellus pretium bibendum. Mauris feugiat urna nec pharetra bibendum. Integer consectetur nisl cursus aliquam rhoncus. Mauris vulputate pulvinar commodo. Mauris placerat enim erat, a dignissim metus laoreet quis. Aenean nec ipsum neque. Proin adipiscing tellus ut nisi rutrum tempus. Aliquam erat volutpat. In dignissim consectetur tellus sit amet sagittis. Nam ac quam id nunc adipiscing commodo. 
</div>

如果这些对您不重要，请删除overflow和。max-height我把它们放进去是为了证明纯 CSS 应该是你所需要的。

随着 div 的增长，它下面的元素将被下推，只要它们不是绝对定位或浮动等。

于 2013-10-23T23:38:36.130 回答