html – CSS – 100％min-height的内容创建一个垂直滚动条_html-js-css

概述我正在尝试创建一个带有导航菜单的标题和填充页面其余部分的内容区域的页面,内容具有100％的最小高度,但即使它是空的,它也会显示一个垂直滚动条,因为标题尺寸. HTML相关部分： <body> <div id="header">Davi Andrade</div> <nav> <ul> <li><a href="/">About</a></li> <li><a 我正在尝试创建一个带有导航菜单的标题和填充页面其余部分的内容区域的页面,内容具有100％的最小高度,但即使它是空的,它也会显示一个垂直滚动条,因为标题尺寸.

HTML相关部分：

<body>  <div ID="header">Davi Andrade</div>  <nav>    <ul>      <li><a href="/">About</a></li>      <li><a href="/">Portfolio</a></li>      <li><a href="/">Downloads</a></li>      <li><a href="index.HTML">Home</a></li>    </ul>  </nav>  <div ID="content">    Text  </div></body>

而CSS：

HTML,body {  background: #333333;  Font-family: "Segoe UI","LucIDa Grande",sans-serif;  height: 100%;  margin: 0;  padding: 0;}#header {  color: #b6b6b6;  float: left;  Font-family: Megrim;  Font-size: 36px;  margin: 18px 52px 18px 52px;  text-shadow: 0 0 3px rgba(0,18,255,0.8),0 1px 2px rgba(0,0.5);  text-transform: uppercase;}nav li a {  color: white;  display: block;  float: right;  Font-size: 1.3em;  List-style: none;  padding: 24px 48px 24px 0;  text-decoration: none;}#content {  clear: both;  background: #3e3e3e;  Box-shadow: 0 -2px 3px rgba(0,0.35),0 -1px 0 rgba(255,0.3);  min-height: 100%;}

有什么方法可以解决这个问题吗？

解决方法根据您要实现的目标,可以通过两种方式之一实现此布局.

首先,如果你在页面底部不需要任何东西,那么你应该从#content中删除min-height和background-color,然后将背景颜色放在体内.我还会稍微改变标题HTML结构,使其在语义上更正确,更易于使用：

HTML

<div ID="header">    <h1>Davi Andrade</h1>    <nav>        <ul>            <li><a href="/">About</a></li>            <li><a href="/">Portfolio</a></li>            <li><a href="/">Downloads</a></li>            <li><a href="index.HTML">Home</a></li>        </ul>    </nav></div><div ID="content">    ....</div>

CSS

/* change original #header to h1 and add the following CSS */#header {    background: #333333;    overflow: hIDden;}/* remove back ground color from #content and add here */HTML,body {    ....    background-color: #3e3e3e;    ....}

其次,如果您确实需要页面底部的页脚,则需要进行上述更改,然后将HTML包装在min-height：100％的容器元素中.然后,您可以使用position：absolute将页脚元素放在容器元素的底部.还有其他一些零碎的东西,我在this Stackoverflow answer中有更详细的解释.

页脚：http://jsfiddle.net/cNfWZ/1/

没有页脚：http://jsfiddle.net/cNfWZ/

总结

以上是内存溢出为你收集整理的html – CSS – 100％min-height的内容创建一个垂直滚动条全部内容，希望文章能够帮你解决html – CSS – 100％min-height的内容创建一个垂直滚动条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1062952.html