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

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 に答える