CSSの最大幅と高さを画面サイズに制限する方法は？

私はPHPギャラリーを作ろうとしています。なぜ、後で写真を見ることができる良いマスクが必要なのですか？マスクが画面サイズより大きくならないようにします。つまり、<body>にはブラウザウィンドウの幅と高さだけが必要なので、<body>のすべての子オブジェクトはブラウザのフレームサイズに制限され、オーバーフローした場合には縮小されます。私はmax-widthとmax-heightを<body>で試しましたが、うまくいきません。ここでCSSの最大幅と高さを画面サイズに制限する方法は？

は私のコードです：

のindex.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="mother"> 
      <div id="header"> 
       <div id="back-link"> 
        <a href="../">Home</a> 
       </div> 
       <div id="prev"> 
        <a href="">next picture</a> 
       </div> 
       <div id="next"> 
        <a href="">previous picture</a> 
       </div> 
       <div id="headline"> 
        <p class="h2">Our Galery</p> 
       </div> 
      </div> 

      <!-- Content --> 
      <div id="container-bild"> 
       <img src="./bilder/P1130079.JPG" id="img-bild" /> 
      </div> 
     </div> 
    </body> 
</html>

のstyle.css：

body { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* mother-container */ 
div#mother { 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 
} 
/* main-container */ 
#container-bild { 
    max-width: 100%; 
    max-height: 100%; 
} 
/* picture in main-container */ 
#img-bild { 
    max-width: 100%; 
    max-height: 100%; 
    border: 1px solid #280198; 
}

Thats what it still looks like - I dont want the Page to be bigger than window - click here to see the wrong version!

出典

2016-03-27 hans2020dieter

試してみてください。

html, 
body { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
}

は、あなたのギャラリーにどのように多くの子要素になります知っていますか？要素の数が静的な場合は、vwとvhの単位を使用してCSSで次元を設定するだけです。 JavaScriptは関与せず、要素はあなたの体をオーバーフローさせることはできません。

出典

2016-03-27 23:23:18

ありがとうございます、あなたのやり方も私が探しているものではありません。あなたのやり方ではスクロールを防ぐことができますが、サイトにはまだオーバーフローがあります。オーバーフローするので、オブジェクトがオーバーフローしようとすると、オーバーフローしないフィッティングサイズに縮小されます...私の意味を知っていますか？ – hans2020dieter

私の答えを編集して、vwとvhの子要素をサイジングすることを提案しました。これは、ギャラリー要素が静的である場合に機能します...要素を動的に追加または減算する場合、JavaScriptだけが唯一の方法です。 –

あなたは高さがビュー画面のちょうど100％になりたい場合は、幅と同じことが、

height: 100vh;//100% view height 
width: 100vw;// 100% view width

を使用しています。

div { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div>hi</div>

出典

2016-03-27 23:24:27 k97513

まずは：あなたの早い回答に感謝します... しかし、あなたの< div >コンテナは画面サイズになる可能性がありますが、そのイメージはオーバーフローを強制するために大きかったので、この回答は私を大いに助けてくれません...私が避けたかったスクロール。 < div >コンテナが画面のウィンドウサイズを超えないようにする方法がありますか？私は、< div >コンテナ内のすべての対象を制限することはできないことを意味し、したがって、彼らは適合サイズに縮小されますか？ – hans2020dieter

divと画像の目的は何ですか？ – k97513

ギャラリーを作っている場合は、画像をdivに入れないでください。 divを "カバー"にして、画像を 'position：absolute'にします。次にそれを配置します。また、ギャラリーを作っている場合は、イメージの 'max-height：90％ 'かそのようなものを作ってください。 – k97513

私は、これはCSSで可能であるならば、それができるか分かりません。私はJavaScriptで同様の問題を解決した：

window.top.innerHeight;

はborwserの利用可能高さは、除外メニューバーなどを取得します。 >私は高さのためにした、私の問題は、フッターコンテンツがempty-た場合でも、一番下にあるべきということであったかを参照してください

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>C-Driver Manager</title> 
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz"> 
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="icon" href="images/favicon.ico"> 
</head> 

<body onResize="resizecontainer();"> 
    <div class="divtop"> 
     <div class="divtopcontainer"> 
      <div class="divlogo"> 

      </div> 
      <div class="divHmenu"> 
       <style> 
    .mnuHorizontal 
    { 
     list-style:none; 
    } 
    .mnuHorizontal li 
    { 
     float:left; 
    } 

    .mnuHorizontal .activemnu a,.mnuHorizontal li a:hover 
    { 
     background:#00B7EF; 
     border-radius:5px; 
     color:white; 
    } 


    .mnuHorizontal li a 
    { 
     display:inline-block; 
     text-decoration:none; 
     padding:5px 12px; 
     text-align:center; 
     font-weight:bold; 
     color:#020042; 
    } 

    </style> 

<ul class="mnuHorizontal"> 
    <li id="index.php"><a href="index.php">HOME</a></li> 
    <li id="features.php"><a href="features.php">FEATURES</a></li> 
    <li id="download.php" class="activemnu"><a href="download.php">DOWNLOAD</a></li> 
    <li id="contact.php"><a href="contact.php">CONTACT</a></li> 
</ul> 
      </div> 
     </div> 
    </div> 

    <div class="divblueline"></div> 

    <div class="divcontainer"> 
<div style="float:left"> 
    <h2>What is C-Driver Manager</h2> 
    C-Driver Manager is a simple tool that; 
    <ul> 
     <li>displays information about your devices</li> 
     <li>identify unrecognized devices by windows</li> 
     <li>Backups your devices driver</li> 
    </ul> 

<h2>Why C-Driver Manager?</h2> 
<ul> 
    <li>No installation needed</li> 
    <li>No adware</li> 
    <li>No spyware</li> 
    <li>Absolutely freeware</li> 
</ul> 
</div> 
<div> 
    <img alt="" src="images/devmgr5.jpg" height="430" width="700"> 
</div> 

</div> 

    <div class="divblueline"></div> 
    <div class="divbottom"> 
     <div id="chmx"> 
     </div> 
    </div> 
</body> 
    <script> 
     for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++) 
     { 
      if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id == 
       "index.php") 

      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu'; 
      } 
      else 
      { 
       document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = ''; 
      } 
     } 

     resizecontainer(); 

     function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     } 
    </script> 
</html>

上記の例内でこの機能のために見て - >

function resizecontainer() 
     { 
      avh  = window.top.innerHeight; 
      dbh  = document.getElementsByClassName('divbottom').length * 
         document.getElementsByClassName('divbottom').item(0).clientHeight; 

      dbt  = document.getElementsByClassName('divtop').length * 
         document.getElementsByClassName('divtop').item(0).clientHeight; 

      dbbl = document.getElementsByClassName('divblueline').length * 
         document.getElementsByClassName('divblueline').item(0).clientHeight; 

      decrh = dbh + dbt + dbbl; 

      document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px'; 
     }

出典

2016-03-27 23:38:23 coban

大丈夫、ありがとう...私はあなたのアイデアと一緒にしようとしている^^ 、私はjavascriptなしで方法を探した...しかし、javascriptの周りにtheresの方法は、それは助けられないXD – hans2020dieter

あなたの利用可能な高さを取得しようとすると、他のすべての要素を除外してください利用可能な高さと幅の残りの部分に画像のサイズを調整してください Btw、私はまた、JavaScriptの例をたくさん見つけることができますstackoverflowの中のウェブマスターではないです。 – coban

大丈夫、ありがとう！ :) – hans2020dieter

CSSの最大幅と高さを画面サイズに制限する方法は？

答えて

関連する問題