Html 如何在 CSS 中将最大宽度和高度限制为屏幕大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36253760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit max width and height to screen size in CSS?
提问by hans2020dieter
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body>needs to have just the width and height of the browser windows, so that every child object in <body>is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-widthand max-heighton the <body>, but it doesn't work.
我正在尝试制作一个 php 画廊，这就是为什么我需要一个好的面具，以后可以在其中显示图片。我希望遮罩不要大于屏幕尺寸。我的意思是，必须没有滚动，并且整个<body>需要只有浏览器窗口的宽度和高度，这样每个子对象都<body>被限制在浏览器的框架大小内，如果溢出就会缩小。我已经在max-width和max-height上尝试过<body>，但它不起作用。
Here are the contents of my index.htmlfile:
这是我的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>
Here are the contents of my style.cssfile:
这是我的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;
}
Here is a screenshot of what it looks like:
这是它的外观截图：
回答by kzhao14
To set the height and width to be 100% of the window (viewport) size, use:
要将高度和宽度设置为窗口（视口）大小的 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> 回答by Donny West
Try:
尝试：
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
您知道您的图库中有多少子元素吗？如果元素的数量是静态的，您可以使用 vw 和 vh 单位在 CSS 中简单地设置它们的尺寸。不涉及 JavaScript，元素永远不会溢出你的身体。
回答by coban
I'm not sure if this is possible with css, it could be. I have solved similar issue with javascript:
我不确定这是否可以用 css 实现，它可能是。我已经用 javascript 解决了类似的问题：
window.top.innerHeight;
gets the available height, excluded menubars etc. of the borwser. See how I did for the height, my issue was that the footer should be at the bottom even if content was 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>
look for this function inside the example above ->
在上面的例子中寻找这个函数 ->
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';
}
回答by loxaxs
As a reminder for my future self:
作为对未来的自己的提醒：
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
Though this is completely unrelated, for links, you might want to use something like:
虽然这完全无关，但对于链接，您可能需要使用以下内容：
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;
}
回答by Kibernetik
My CSS solution is:
我的 CSS 解决方案是：
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
回答by Goddard
This works great. This will keep your image from growing too large width wise and also keep its proportions.
这很好用。这将防止您的图像在宽度上增长过大并保持其比例。
img {
max-width: 100%;
height: auto;
}
