画像は画面の高さでリサイズされ、スクロールバーはありません - CSS

2日が経過しています。しかし、まだ解決策は見つかりませんでした。ので、すべてのコンテンツ（画像とテキスト）は画面の高さと自動サイズ変更でなければならない、画像は画面の高さでリサイズされ、スクロールバーはありません - CSS

2画面高さが未知である、

1いいえスクロールバーを（垂直または水平） - 条件あります

私のコードはhere-私はこのlinkとで試してみた

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HTML Quickstart</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 
    <!-- Bootstrap fremwork main css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <style> 
     #padding{ 
      padding: 15px; 
     } 
     img{ 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="myDiv"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-12"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</h2></div> 
      </div> 

     </div> <!-- end container --> 
    </div> <!-- end myDiv --> 

</body> 
</html>

です。

内容（多すぎないコンテンツ）が画面の高さよりも大きいため、画面の高さを調整できますか？

解決策や提案などがあればコメントをお寄せください。

ありがとうございました。

出典

2017-04-01 Mofizul I

は私がしたままの 'HTMLのように何度も試みられてきた{ \t高さ：100％; } ボディ{ 高さ：100％; \tマージン：0px; } .myDiv { \t float：left; \t高さ：100％; \t幅：100％; } ' –

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

出典

2017-04-01 03:54:30 an0nh4x0r

これは動作していません...スクロールバーを表示しています。 –

スクロールバーを無効にしたい場合は、 'img {overlay-x：hidden} 'を使用してください。 – an0nh4x0r

ウェブページを完全に反応させたい場合は、the Grid System Of Bootstrap Frameworkのルールに従ってください。使用できるグリッドオプションは次のとおりです。

私はまた、あなたの場合は、行われるべきか、ソースコード&デモを提供してきました。あなたはそれをもっと学び、より多くを活用すべきです。これがあなたの答えになることを願っています。 私に尋ねる気軽に。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Example</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
    .row { 
 
     margin-bottom: 0.3em; 
 
    } 
 
    
 
    .picture { 
 
     padding: 0.3em; 
 
    } 
 
    
 
    img { 
 
     width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- end container-fluid --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

出典

2017-04-01 04:04:19

あなたのコメント仲間に感謝します。それは反応的な、または完全に応答する問題ではありません。それは適応スクロールバーの問題です。コンテンツはスクロールバーなしで画面の高さで調整する必要があります。 –

ようこそ。スマートフォン、タブレット、ラップトップ、PCなどのあらゆるデバイスでページを完全に反応させたいと思っていました。 –

あなたはレイアウトのためのFlexボックスを使用することができます。競合を避けるために、ブートストラップグリッドコードを削除しました。また、id paddingが複数回使用されていますが、これも以下のコードで修正されています。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>HTML Quickstart</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 
 
    <!-- Bootstrap fremwork main css --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <style> 
 
    html, body, .myDiv, .container { 
 
     height: 100%; 
 
    } 
 
    .container { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 
    .container .image { 
 
     flex: 1; 
 
     display: flex; 
 
     flex-direction: row; 
 
    } 
 
    .container .image img { 
 
     flex: 1; 
 
    } 
 
    .padding{ 
 
     padding: 15px; 
 
     flex: 1; 
 
    } 
 
    img{ 
 
     width: 100%; 
 
     height: 100% !important; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="myDiv"> 
 
    <div class="container"> 
 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row text"> 
 
     <div class="col-md-12"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</h2></div> 
 
    </div> 
 

 
    </div> <!-- end container --> 
 
</div> <!-- end myDiv --> 
 

 
</body> 
 
</html>

出典

2017-04-01 04:09:04 shaochuancs

おかげで多くの仲間。あなたの答えはうまくいっていますが、より適切な答えを楽しみにしています。 –

画像は画面の高さでリサイズされ、スクロールバーはありません - CSS

答えて

関連する問題