私のウェブサイトで

のサイズを変更するときに画面全体にコンテンツを収める方法、6つの '画像ボックス'（3つの '行'と3つの '行'）が必要です。画面/タブのサイズを変更すると、これらの6つのイメージボックスは常に完全に見えるはずです。それらは常に画面サイズに収まる必要があります。私のコードは何とか動作しますが、底にはありません。ある量の後に画面サイズを減少させた後に、第2行のカードの一部だけが見える。私のウェブサイトで

また、スクロールバーが表示されずにコンテンツを画面の100％にしたいと考えています。

ウェブコンテンツは、2つの部分に分かれています：トップレイアウトとイメージボックス。

これは基本的に私のCSSファイルです：

* { 
font: 18px Verdana; 
font-size: 22px; 
} 

html{ 
height: 100%; 
} 

body { 
font: 18px Verdana; 
height: 100%; 
margin-left: 30px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-top: 30px; 
overflow: hidden; 
} 

#topLayout { 
height: 190px; 
margin-bottom: 10px; 
} 


#imagebox { 
height: 80%; 
margin-bottom: 0px; 
display: flex; 
justify-content: space-between; 
flex-wrap: wrap; 
} 

.box{ 
cursor: pointer; 
flex: 0 1 32.5%; 
margin-top: 1.2%; 
}

、これは私のhtmlコードです：

<body> 

<div id="topLayout"> 

    <div id="block1"> 
    ..... 
    </div> 

    <div id="block2"> 
    .... 
    </div> 

</div> 

// the images are appended to the imagebox tag in the .js file via a 
    function 

<div id="imagebox"></div> 

</div>

は事前にありがとうございました。

出典

2017-11-09 lotte

で試してみてください。ロードされたページを右クリックして "点検"を選択することによって、マークアップ/スタイルを得ることができます。 – LGSon

私が見る1つの問題は、本体の高さが100％と余白を加えたことです。これにより、ドキュメントの高さは常にウィンドウの高さより60px大きくなります。解決方法：高さには 'calc'を使い、余白の代わりに' padding'を使い、 'box-sizing：border-box'を使います。 –

多分あなたを助けます。ここでは、この

#imagebox { 
position: absolute; 
width: 100%; 
top: 230px; 
bottom: 0; 
left: 30px; 
right: 30px; 
}

我々は問題を再現、コードsnippet_作業_minimalが必要example

出典

2017-11-11 04:56:18

答えて

関連する問題