我在页面的左侧有一个导航栏，我想让它伸展到页面高度的100%。不仅是视口的高度，还包括滚动之前隐藏的区域。我不想用javascript来完成这个。
它能在HTML/CSS中完成吗?
当前回答
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
其他回答
这就是如何使你的侧导航与页面内容一样高，而不必改变主体为伸缩或表格。
不要将html或body的高度设置为100%，因为那样会使它只和浏览器视口一样高，页面会溢出，而你的导航只会和视口一样高。
只需将你的导航设置为高度:100%位置:绝对与html标签位置:相对。
The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag. <html style='position:relative'> <body style='margin:0'> <div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'> nav </div> <div style='font-size:99px;padding:33px'> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> I want my side div to be as tall as the page content.<br /> </div> </body> </html>
在HTML5中，最简单的方法就是设置高度:100vh。其中“vh”代表浏览器窗口的视口高度。响应浏览器和移动设备的大小调整。
你可以使用伪列来作弊 或者您可以使用一些CSS技巧
我想在提示一个模态弹出窗口之前覆盖整个网页。我尝试了许多方法使用CSS和Javascript，但没有一个帮助，直到我想出以下解决方案。它对我有用，我希望它也能帮助到你。
<!DOCTYPE html> <html> <head> <style> html, body { margin: 0px 0px; height 100%; } div.full-page { position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; opacity:0.8; overflow-y: hidden; overflow-x: hidden; } div.full-page div.avoid-content-highlight { position: relative; width: 100%; height: 100%; } div.modal-popup { position: fixed; top: 20%; bottom: 20%; left: 30%; right: 30%; background-color: #FFF; border: 1px solid #000; } </style> <script> // Polling for the sake of my intern tests var interval = setInterval(function() { if(document.readyState === 'complete') { clearInterval(interval); isReady(); } }, 1000); function isReady() { document.getElementById('btn1').disabled = false; document.getElementById('btn2').disabled = false; // disable scrolling document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } function promptModalPopup() { document.getElementById("div1").style.visibility = 'visible'; document.getElementById("div2").style.visibility = 'visible'; // disable scrolling document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } function closeModalPopup() { document.getElementById("div2").style.visibility = 'hidden'; document.getElementById("div1").style.visibility = 'hidden'; // enable scrolling document.getElementsByTagName('body')[0].style.overflow = 'scroll'; } </script> </head> <body id="body"> <div id="div1" class="full-page"> <div class="avoid-content-highlight"> </div> </div> <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button> <div id="demo"> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> <h2>Original content</h2> </div> <div id="div2" class="modal-popup"> I am on top of all other containers <button id="btn2" onclick="closeModalPopup()" disabled>Close</button> <div> </body> </html>
祝你好运;-)
此代码工作，但不完全支持:
height: 100svmax;
浏览器支持
