网站建设所需费用明细,wordpress点击文章不能进入,跨国贸易平台有哪些,东莞网站建设培训html元素如何仅使用css填充剩余屏幕高度的100#xff05;#xff1f;我有一个标题元素和一个内容元素#xff1a;#header#content我希望标题具有固定的高度#xff0c;并且内容可以填满屏幕上可用的所有剩余高度#xff0c;使用overflow-y: scroll;。这可能没有Javascript…html元素如何仅使用css填充剩余屏幕高度的100我有一个标题元素和一个内容元素#header#content我希望标题具有固定的高度并且内容可以填满屏幕上可用的所有剩余高度使用overflow-y: scroll;。这可能没有JavascriptHarry asked 2019-04-12T17:37:27Z15个解决方案211 votes忘了所有的答案这行CSS在2秒内为我工作height:100vh;vmax 浏览器屏幕高度的1资源对于响应式布局缩放您可能希望使用min-height: 100vh[2018年11月更新]正如评论中所提到的使用最小高度可能会避免在响应式设计上出现问题[更新于2018年4月]如评论中所述早在2011年提出问题时并非所有浏览器都支持视口单元。其他答案是当时的解决方案 - 在IE中仍然不支持vmax因此这可能不是所有人的最佳解决方案。Sebastien H. answered 2019-04-12T17:38:44Z67 votes这方面的技巧是在html和body元素上指定100的高度。有些浏览器会查看父元素(htmlbody)来计算高度。html, body{height: 100%;}#Header{width: 960px;height: 150px;}#Content{height: 100%;width: 960px;}BentOnCoding answered 2019-04-12T17:37:38Z31 votes实际上最好的方法是html {height:100%;}body {min-height:100%;}这解决了我的一切它帮助我控制我的页脚无论页面是否向下滚动它都可以有固定的页脚。技术解决方案 - 已编辑从历史上看与“宽度”相比“高度”是一个难以理解的东西最简单。 由于css专注于进行造型工作。 上面的代码 - 我们给了和一个高度。 这是魔术进入画面的地方 - 因为我们在比赛桌上有min-height我们告诉浏览器优于因为保持最小高度。 这反过来允许覆盖因为的高度已经提前。 换句话说我们正在欺骗浏览器从表中“撞”所以我们可以独立设计。Faron answered 2019-04-12T17:39:44Z8 votes接受的解决方案实际上不起作用。您会注意到内容div将等于其父级body的高度。因此将body高度设置为100%会将其设置为等于浏览器窗口的高度。 假设浏览器窗口的高度为768px通过将内容div的高度设置为100%,div的高度将依次为768px。因此最终标题div为150px内容div为768px。最后 您将在页面底部下方找到内容150px。 有关其他解决方案请查看此链接。dykstrad answered 2019-04-12T17:40:18Z6 votes使用HTML5您可以这样做CSSbody, html{ width:100%; height:100%; padding: 0; margin: 0;}header{ width:100%; height: 70px; }section{ width: 100%; height: calc(100% - 70px);}HTMLblabablalba Content Miguel answered 2019-04-12T17:40:54Z2 votes您可以在min-height属性上使用vh。min-height: 100vh;您可以执行以下操作具体取决于您使用边距的方式...min-height: calc(100vh - 10px) //Considering youre using some 10px margin top on an outside elementAlmeida Cavalcante answered 2019-04-12T17:41:34Z2 votes对我来说下一个运作良好我将标题和内容包装在div上我用这个引用用flexbox填充高度。 CSS是这样的.main-wrapper {display: flex;flex-direction: column;min-height: 100vh;}.header {flex: 1;}.content {flex: 1;}有关flexbox技术的更多信息请访问参考hasher answered 2019-04-12T17:42:30Z1 votes您也可以将父级设置为display: inline.参见[http://codepen.io/tommymarshall/pen/cECyH]一定要将html和body的高度设置为100。tommymarshall answered 2019-04-12T17:43:12Z1 votes在这种情况下我希望我的主要内容div是液体高度以便整个页面占用浏览器高度的100。height: 100vh;Fezal halai answered 2019-04-12T17:43:54Z0 votes除非您需要支持IE 9及更低版本否则我会使用flexboxbody { display: flex; flex-direction: column; }.header { height: 70px; }.content { flex: 1 1 0 }你还需要让身体填满整个页面body, html{ width:100%; height:100%; padding: 0; margin: 0;}James Lambert answered 2019-04-12T17:44:34Z0 votesCSS PLaY | 跨浏览器固定页眉/页脚/居中单列布局CSS框架版本2示例2指定宽度| 456 Berea Street一个重要的事情是虽然这听起来很容易但是你的CSS文件会有相当多的丑陋代码来获得这样的效果。 不幸的是它确实是唯一的选择。Joe answered 2019-04-12T17:45:25Z0 votes接受的答案不起作用。 最高投票的答案并不能回答实际问题。 使用固定的像素高度标题并在浏览器的剩余显示中填充并滚动以进行功率流。 这是一个使用绝对定位实际工作的解决方案。 我还假设通过问题中“固定标题”的声音知道标题的高度。 我在这里使用150px作为例子HTMLCSS :(仅为视觉效果添加背景色)#Header{height: 150px;width: 100%;background-color: #ddd;}#Content{position: absolute;width: 100%;top: 150px;bottom: 0;background-color: #aaa;overflow-y: scroll;}有关其工作原理的详细信息请参阅#Content中的实际内容使用bootstrap行和列查看此jsfiddle。KjetilNordin answered 2019-04-12T17:46:19Z0 votes非常简单#content {max-height: 100%;}Masood Aslami answered 2019-04-12T17:46:51Z-1 votes到目前为止我找到的最佳解决方案是在页面底部设置页脚元素然后评估页脚偏移量与我们需要展开的元素之间的差异。例如html文件css文件#footer {position: fixed;bottom: 0;width: 100%;}js文件(使用jquery)var contents $(#contents);var footer $(#footer);contents.css(height, (footer.offset().top - contents.offset().top) px);您可能还想更新每个窗口调整大小的内容元素的高度所以...$(window).on(resize, function() {contents.css(height, (footer.offset().top -contents.offset().top) px);});Αλέκος answered 2019-04-12T17:48:00Z-3 votes你尝试过这样的事吗CSS.content {height: 100%;display: block;}HTMLRahul Choudhary answered 2019-04-12T17:48:39Z
