如何将最小高度设置为查看屏幕的 100% 和页面的一半？

Posted 2023-03-06

【中文标题】如何将最小高度设置为查看屏幕的 100% 和页面的一半？

【英文标题】：How to set minimum height to the 100% of the viewing screen and half of the page?

【发布时间】：2014-01-24 23:15:08

【问题描述】：

我有单页网站，其中第一部分主要部分应该是查看者屏幕/浏览器大小的 100%，第二部分应该在查看区域下方，因此当用户点击链接时，页面会向下滚动到第二部分。

我如何做到这一点。, 到目前为止我已经尝试过了，但它没有将最小高度设置为 100%

HTML：

<div class="container">
<div class="firsthalf">
this is the first part of the site
<a href="#help"> <i class="fa fa-question-circle fa-lg"></i>
<div class="notice">this is aligned to bottom of first half
</div></div>   
</div>    

<div class="container">
<div id="help" class="secondhalf">
<div class="col-md-8 col-md-offset-2">
<div class="well">
we are in second part of the site
</div>
<a href="#top" class="btn btn-default"><i class="fa fa-arrow-up "></i> Top</a>
</div>
</div>
</div>

CSS：

body, html 
  height: 100%;

.firsthalf
height:100%;

.notice
margin-bottom:0%;
padding-bottom:5px;

.secondhalf
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
min-height:50%;

http://jsfiddle.net/4yk2q/

【参考方案1】：

视口高度 (vh) 您正在寻找身高：50vh；或高度：100vh；

您可能会发现一些有用的选项：

vh（视口高度） vw（视口宽度） vmin（视口最小长度） vmax（视口最大长度）

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

.secondhalf
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
height:50vh;

编辑：确保您需要支持的浏览器支持它。 http://caniuse.com/#feat=viewport-units

【参考方案2】：

与position: relative; 和position: absolute; 一起玩……在这种情况下，他们是你的朋友……

Solution demo

body, html 
    height: 100%;

.container 
    height:100%;   /* first make container full height */

.firsthalf 
    height:100%;
    border:1px solid #000;
    position: relative; /* make parent div relative */

.notice 
   padding-bottom:5px;
   position: absolute; /* this does the base line trick */
   bottom: 0;
   right: 0;

【讨论】：

谢谢，这是最好的，我正在考虑设置 display:table

display:table 很好，但每个 css 仅在某些标记布局中都很好...position 最适合您的情况并且更清洁！ :)

谢谢，它告诉我等待 2 分钟，接受答案，我猜想在创建问题后立即接受答案。，

大声笑...您在发布问题后的 2 分钟内得到了您的答案...希望我能这么幸运....新年快乐！ :D

祝你新年快乐 2 :) 为什么下框的宽度不同，并且通知 txt 不能居中？任何想法 ？ jsfiddle.net/4yk2q/2