1

ブログページを作成していますが、使用可能なすべての幅と高さを100％取得するにはDIVが必要です。 ここに画像の説明を入力してください

を使用しようとするHeight : 100%と、DIVは表示領域のみを取得します。したがって、画面の解像度が1920x1080で、Webサイトのサイズが900x16000の場合、高さ：100％の場合は1080のみになります。これを投稿する前に、ここで多くの回答を見てきましたが、うまく機能させることができませんでした。

CSS：

#parent
{
    position : absolute;
    background: green;        
    height : 100%;
    width : 100%;
}
.child
{
   position: relative;
    float:left;
   background: red;
   height : 400px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}

HTML：

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>
​

このJSFiddleを見てください：http：//jsfiddle.net/acJVw/21/私 が必要としているのは、（スクロール可能な）ページの一番下まで、緑色の領域が利用可能なすべてのスペースを占めることです。編集：

編集： 答えは私が提供した例で機能しているが、グラデーションの背景では機能していないため、質問を少し変更する必要があります。グラデーションと最小の高さを備えた新しいJSFiddleは次のとおりです。http： //jsfiddle.net/acJVw/27/

グラデーションはページの一番下まで到達しませんが、停止するだけです。

4

2 に答える 2

2

高さの代わりにmin-heightを使用します。表示されている画面よりも大きい場合でも、コンテンツのスペースをとるようにします。このフィドルを見てください

<div id="parent">
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
</div>

およびcss

 #parent
{
position : absolute;
background: green;        
min-height : 100%;
width : 100%;
}
.child
{
position: relative;
float:left;
background: red;
height : 100px;
width : 500px;
border : 1px solid yellow;
margin: 10px 10px 10px 10px;
}

編集 ：コンテンツが画面の幅よりも大きい場合は、試すこともできます

最小幅：100％;

質問編集後フィドル でmin-height：100％を使用しなかったため、グラデーションが停止していますこのフィドルを 試してください

于 2012-12-26T18:37:48.173 に答える
1

試す;

私の画面では100％かかりますか？

   <style>
* {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#parent
{
    position : absolute;
    background: green;        
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;

}
.child
{
   position: relative;
   float:left;
   background: red;
   height : 100px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}
​
</style>

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>
于 2012-12-26T18:30:59.453 に答える