Html 基本CSS布局问题,底部空白
很抱歉这个愚蠢的问题,但出于某种原因,HTML/CSS布局的这一部分总是让我 我有一个网站在。只是练习HTML/CSS/jQuery,最终练习PHP/Database 在chrome中,页脚太长。在firefox中,页脚大约是我想要的三倍,在safari中也是如此。现在我在html和正文上有100%的高度,这样背景图像可以扩展到显示的所有内容 为了补偿页脚(现在太长了),我是否需要将主容器设置为最小长度,以便页脚能够容纳空间?这有一般的设计规则吗?还是CSS规则 基本上,我喜欢页眉和主容器的外观,但是因为它没有填满整个浏览器窗口,所以页脚的wayyyy太长了,或者如果没有100%的html正文,页脚下面就会有一个空白。我的CSS代码如下,如果你想快速检查它 唯一的高度是100%的html,正文。收割台的高度为100px,每个容器的高度为160px。页脚也是55pxHtml 基本CSS布局问题,底部空白,html,css,layout,Html,Css,Layout,很抱歉这个愚蠢的问题,但出于某种原因,HTML/CSS布局的这一部分总是让我 我有一个网站在。只是练习HTML/CSS/jQuery,最终练习PHP/Database 在chrome中,页脚太长。在firefox中,页脚大约是我想要的三倍,在safari中也是如此。现在我在html和正文上有100%的高度,这样背景图像可以扩展到显示的所有内容 为了补偿页脚(现在太长了),我是否需要将主容器设置为最小长度,以便页脚能够容纳空间?这有一般的设计规则吗?还是CSS规则 基本上,我喜欢页眉和主容器的外观
html, body, div, header, footer, article, h2 {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-image: url('images/bkg-img.jpg');
background-repeat: repeat;
}
header {
background: #6888fd; /* Old browsers */
background: -moz-linear-gradient(top, #6888fd 0%, #1c46e9 55%, #0330e4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6888fd), color-stop(55%,#1c46e9), color-stop(100%,#0330e4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* IE10+ */
background: linear-gradient(to bottom, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6888fd', endColorstr='#0330e4',GradientType=0 ); /* IE6-9 */
height: 100px;
}
#background-container {
padding-top: 50px;
padding-bottom: 25px;
}
#container {
margin: 0 auto;
background-color: #587DFF;
height: 230px;
width: 830px;
text-align: center;
padding-top: 100px;
-moz-border-radius: 25px;
border-radius: 25px;
}
#article-container {
width: 960px;
margin: 0 auto;
}
article {
border: 4px solid #9AADFA;
background-color: #002DE2;
color: #fff;
width: 280px;
height: 160px;
float: left;
margin-left: 30px;
margin-top: 25px;
/*
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
*/
}
.clear {
clear: both;
}
span {
display: block;
padding-top: 10px;
color: #6D8EFF;
}
h2 {
padding-left: 10px;
padding-top: 5px;
}
p {
padding-left: 5px;
padding-right: 5px;
}
footer {
text-align: center;
border-top: 1px solid #7493FF;
background-image: url('images/bkg-img.jpg');
background-repeat: repeat;
height: 55px;
}
nav {
float: right;
color: #84A0FF;
position: relative;
top: 60px;
left: -75px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
padding-left: 10px;
}
#login-container {
float: right;
padding-right: 50px;
padding-top: 25px;
color: #fff;
position: relative;
left: 450px;
}
#header-container {
margin: 0 auto;
width: 960px;
height: 100px;
}
如果你想让页脚粘在页面底部,类似的方式可能会有帮助。你能发布一些你希望它看起来如何的屏幕吗?对我来说,我通常会尝试在可以的地方增加一点空白,以改变页面的高度。例如,在三个蓝色框和线条之间增加一点空间。除此之外,如果你在主蓝框中有很多内容,可能会填满整个空间。这就是我要找的Mateusz Rogulski。我试图避免在框和线之间或三个框和上面的大框之间添加空间,尽管我认为这可能是“它需要的”方式。另外,我会看看粘页脚的想法。粘页脚似乎做我需要的,虽然现在只有一个很大的空间下的框,但我认为这将是一个在我的布局有所改变,以使它看起来更好。如果有人有任何其他想法,尽管告诉我!