添加位置后，如何使div具有100％的身高：页面底部下方的绝对div？
[英]How to make divs have 100% body height after adding position: absolute div below the page bottom?
问题描述
Please give me a clue how to achieve that with pure css? 
请给我一个提示，如何使用纯CSS实现该目标？ I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. 我需要并排制作2个div，并且有一些元素要添加到其中一个div中，但要远低于其底部。 The page automatically resizes then, but these 2 divs heights stays unchanged. 页面会自动调整大小，但是这2个div高度保持不变。 Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script? 是否有可能使它们仍然适合css中描述的整个页面，或者唯一的解决方案是通过脚本指定确切的高度？
Or maybe there's another way to make such a layout with a div added by script? 也许还有另一种方法可以通过脚本添加div来进行这种布局？
Let me show it in the fiddle: 让我在小提琴中显示它：
window.onload=run; function run() { document.getElementById("b1").addEventListener("click", function() { var d=document.createElement("div"); d.id="dd"; d.style.top="2000px"; d.style.left="0"; d.style.width="50px"; d.style.height="20px"; d.appendChild(document.createTextNode("Test")); document.getElementById("col2").appendChild(d); }); }
html, body { height: 100%; } div#col1 { background: #eee; position: absolute; top: 0; bottom: 0; left: 5rem; width: 5rem; text-align: center; } div#col2 { background: #eff; position: absolute; top: 0; bottom: 0; left: 10rem; right: 0; } div#dd { position: absolute; background: #f99; border: 2px solid red; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> Test </title> </head> <body> <div id="col1"> <input type=button id="b1" value="+"> </div> <div id="col2"> </div> </body> </html>
Thank you! 谢谢！
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. 简短更新：我刚刚发现，添加后html和body的高度都没有更新，但是浏览器允许滚动到新添加的div。 It's very strange behavior even for the css/html 即使对于css / html，这也是非常奇怪的行为
3 个解决方案
解决方案1
0 2016-09-09 21:05:47
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? 我不确定您的目标是什么，但是可能会溢出：您需要隐藏的内容吗？ It will make it so the div won't expand to include that addition... 它将做到这一点，以便div不会扩展为包括该添加项...
window.onload=run; function run() { document.getElementById("b1").addEventListener("click", function() { var d=document.createElement("div"); d.id="dd"; d.style.top="2000px"; d.style.left="0"; d.style.width="50px"; d.style.height="20px"; d.appendChild(document.createTextNode("Test")); document.getElementById("col2").appendChild(d); }); }
html, body { height: 100%; } div#col1 { background: #eee; position: absolute; top: 0; bottom: 0; left: 5rem; width: 5rem; text-align: center; } div#col2 { background: #eff; position: absolute; top: 0; bottom: 0; left: 10rem; right: 0; overflow: hidden; } div#dd { position: absolute; background: #f99; border: 2px solid red; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> Test </title> </head> <body> <div id="col1"> <input type=button id="b1" value="+"> </div> <div id="col2"> </div> </body> </html>
解决方案2
0 2016-09-09 21:51:20
如果不需要滚动，请尝试position：fixed而不是absolute。
解决方案3
0 2016-09-10 00:05:23
You don't need all this CSS, all you need to do is to set their height in CSS explicitely: 您不需要所有这些CSS，您要做的就是明确地在CSS中设置其高度：
first to
height: 100vh首先到height: 100vhafter you add new element, to
height: calc(100vh + X)where X is distance from initial divs bottom to bottom of the added element.添加新元素后， height: calc(100vh + X)其中X是从初始div底部到添加元素底部的距离。
EDIT: Another solution with removed position: absolute : 编辑：删除position: absolute另一个解决方案position: absolute ：
window.onload=run; function run() { document.getElementById("b1").addEventListener("click", function() { var d=document.createElement("div"); d.id="dd"; d.style.width="50px"; d.style.height="20px"; d.appendChild(document.createTextNode("Test")); document.getElementById("col2").appendChild(d); }); }
html { height: 100%; } body { display: flex; min-height: 100%; margin: 0 5rem 0 0; } div#col1 { background: #eee; width: 5rem; text-align: center; } div#col2 { background: #eff; width: calc(100vw - 10rem); } div#dd { background: #f99; border: 2px solid red; margin-top: 2000px; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> Test </title> </head> <body> <div id="col1"> <input type=button id="b1" value="+"> </div> <div id="col2"> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.