Question

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

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下方的对象以进一步向下放置在页面上并为大容器腾出空间？

干杯，尼克

Answer 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建议）。 ;）

然后你可以把最大宽度：10em;或类似的东西。

Answer 2

<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的增长，只要它们不是绝对的或浮动的等等，它下面的元素就会被推下来。

根据内部信息调整div的大小

2 个答案: