Как ограничить максимальную ширину и высоту размером экрана в CSS?

Я пытаюсь сделать php-галерею, и поэтому мне нужна хорошая маска, где позже могут быть показаны фотографии. Я хочу, чтобы Маска не была больше, чем размер экрана. Я имею в виду, что прокрутки не должно быть, и всему <body> нужно иметь только ширину и высоту окон браузера, чтобы каждый дочерний объект в <body> был ограничен размером кадра браузера и был сокращен. вниз, если он переполнен. Я пробовал с max-width и max-height для <body>, но это не работает.

Вот содержимое моего файла 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;
}

Вот скриншот того, как это выглядит:

screenshot

ОТВЕТЫ

Ответ 1

Чтобы установить высоту и ширину равными 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;
  color: white;
}
<div>some content here</div>

Ответ 2

Try:

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

Знаете ли вы, сколько дочерних элементов будет в вашей галерее? Если количество элементов статично, вы можете просто установить их размеры в CSS с помощью единиц vw и vh. Нет задействованного JavaScript, и элементы никогда не смогут переполнить ваше тело.

Ответ 3

Я не уверен, возможно ли это с помощью css, возможно. Я решил аналогичную проблему с javascript:

window.top.innerHeight;

получает доступную высоту, исключает меню и т.д. борнера. Посмотрите, как я сделал это на высоте, моя проблема заключалась в том, что нижний колонтитул должен быть внизу, даже если содержимое пуста → 

<!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';
        }

Ответ 4

Как напоминание для моего будущего:

.book {
    margin: auto;
    width: 100vh;
    max-width: 100vw;
    min-width: 500px;
}

Хотя это совершенно не связано, для ссылок вы можете использовать что-то вроде:

a[href^="#"] {
    text-decoration: none;
    color: black;
    background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
    text-decoration: underline;
    color: blue;
    background: none;
}

Ответ 5

Мое решение CSS:

position: absolute;
width: 100%;
height: 100%;
overflow: hidden;

Ответ 6

Это прекрасно работает. Это будет препятствовать тому, чтобы Ваше изображение стало слишком большим, а также сохраняло его пропорции.

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