问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 CSS 中将最大宽度和高度限制为屏幕尺寸？

社区维基
1
新手上路，请多包涵

我正在尝试制作一个 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;
}

这是它的截图：

截屏

原文由 hans2020dieter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsslimitscreen-size
阅读 1.4k
1 个回答
得票最新
社区维基
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>

原文由 kzhao14 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题