我本以为这可以用flexBox实现,但我看到的每个例子都有100％的高度或者所有父元素的高度：100vh.我可以使用display：table或dispaly：table-cell如果是这种情况.
HTML { min-height: 100%; position: relative;}body { height: 100%; background-color: #f7f7f4;}#root { height: 100%; padding-bottom: 170px;}.wrapper { max-wIDth: 750px;}.grID { List-style: none; margin: 0; padding: 0; margin-left: -30px;}.grID__item { display: inline-block; padding-left: 30px; vertical-align: top; wIDth: 100%; -webkit-Box-sizing: border-Box; Box-sizing: border-Box;}.one-half { wIDth: 50%;}.private-banner__container { height: 98px;}.private-banner__layout { wIDth: 100%; height: 100%; display: table;}.private-banner__right,.private-banner__left { display: table-cell; vertical-align: mIDdle;}.footer__footer { padding-top: 48px; padding-bottom: 48px;}ul { margin-left: 38px; margin-left: 2.375em;}.footer__footer ul li:not(last-of-type) { margin-right: 48px;}.footer__footer li { display: inline;} <HTML lang="en"> <body> <div ID="root"> <header role="banner"> <div > <div > <div ><h1>logo</h1></div> <div ><a href="/business/dashboard">Home</a><a tabindex="0">Log Out</a></div> </div> </div> </header> <div> <div > <div > <div > <h1>Dashboard</h1></div> </div> </div> </div> <footer > <div > <div > <div > <ul> <li><a target="_blank" href="/static/about">About</a></li> <li><a target="_blank" href="/static/accessibility">Accessibility</a></li> <li><a target="_blank" href="/static/cookies">cookies</a></li> <li><a target="_blank" href="/static/privacy">Privacy</a></li> </ul> </div> </div> </div> </footer> </div> </body></HTML>解决方法 如果我是对的,你正在努力实现这样的目标.
<header ID="header" height="120px"></header><div ID="content" height="fill the rest of the height"></div><footer ID="footer" height="120px"></footer>
在这种情况下,您将需要使用CSS flex. Flex在没有任何修复的情况下水平工作,因为默认情况下,任何块级元素都具有宽度= 100％,即填充父级的整个可用宽度.但它没有默认高度.块元素的高度计算为所有孩子的高度的总和. div的默认高度是它的内容高度.甚至< HTML>,< body>标签不会跨越窗口的整个高度,它跨越窗口内容的高度.
因此,要使d性工作垂直并将屏幕划分为页眉,页脚和自动调整内容,您需要从顶部开始设置高度,设置< HTML>,< body>和#root为100％
HTML,body,#root { height: 100%; margin: 0; paddding: 0;} 现在您的#root div占据整个屏幕高度,因此您可以使用flex设置页眉,页脚和内容高度.
#root { display: flex; flex-direction: column;}header { height: 120px;}#content { flex: 1; overflow-y: auto; /* scrollbar for content */}footer { height: 120px;} This same work of flex can be done by JavaScript
我们运行一个JavaScript代码,在页面加载时运行,计算屏幕高度并为内容div指定完美的高度,这样可以很好地解决它.
window.onload = function () { var headerHeight = document.getElementByID('header').clIEntHeight; var footerHeight = document.getElementByID('footer').clIEntHeight; var contentheight = screen.availHeight - headerHeight - footerHeight; document.getElementByID('content').style.height = contentheight + 'px';} And for centering the
<h1>header,just use text-align property,it’s enough.
h1 { text-align: center;} 您不需要将vertical-align设置为mIDdle,除非您的< h1>标签具有指定的高度.
总结以上是内存溢出为你收集整理的html – 抓住div的可用高度而不知道它的高度或能够设置高度100％全部内容，希望文章能够帮你解决html – 抓住div的可用高度而不知道它的高度或能够设置高度100％所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）