Question

我已经查看了每个页面的问题。我可以通过移除高度：100％属性来保持页脚向下但是当我用足够大的宽度查看时，我的半透明背景不会向下推到页脚。在它的当前形式中，当全屏观看时它可以正常工作但是一旦宽度变得太窄，内容就会在页脚后面运行。你可以在这里查看... codykrauskopf.com/about或http://jsfiddle.net/73PHQ/

使用javascript动态设置页面高度会更容易吗？

html, body {height: 100%;
width:100%;
margin:0;
padding:0;
overflow:auto;
}

#wrap {
width:100%;
min-height:100%;
}
/* Circus.html content*/
#circusContent{
margin-left:100px;

}

p{
font-family:georgia;

}

div.topButtons{
display:inline-block;
margin-top:15px;
line-height:50px;
text-align:center;
vertical-align:middle;
width:130px;
background: rgb(166, 166, 166); /* The Fallback */
background: rgba(166, 166, 166, .5); 
}

a.forms{
text-decoration:underline;
}

div.topButtons:hover{
background: rgb(100, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1); 
}

#circusParagraph{

color:white;
font-size:14px;
text-align:center;
margin-left:10%;
width:70%;
}
/* road show page specific styling */

.rs{
width:200px;
height:200px;
}

/* museum page specific styling */
#museumPic{
height:400px;
width:520px;
margin-left:-50px;
}

/* acts page specific styling */
p.acts{
text-align:left;
}




/* ticket page specific styling */


div.ticketBut{
display:inline-block;
margin-top:15px;
font-size:20px;
line-height:20px;
text-align:center;
vertical-align:middle;
width:250px;
background: rgb(166, 166, 166); /* The Fallback */
background: rgba(166, 166, 166, .5);
}
div.ticketBut:hover{
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1);
}


/* about page specific styling */
#float{
float:right;
}
#floatleft{
float:left;
}
/* membership page specific styling */
#leftJustified{
text-align:left;
}
/* festival page specific styling */
#leftFestivalButton{
margin-left:138px;
}
/* performers page specific styling */



h3{
margin-top:0px;
padding-top:4px;
text-align:center;
font-size:23px;
font-family:Gill Sans MT Condensed;
font-weight:normal;
margin-bottom:0px;
color:#DEB887;
}


div.buttons{
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
width:100%;

height:4.057017%;
text-align:center;
vertical-align:middle;
}
p.buttons{
display:inline;
font-family:Gill Sans MT Condensed;
font-size:25px;
}

div.buttons:hover{
background: rgb(100, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1); 
}

div.notPage{
width:100%;
height:4.057017%;
text-align:center;
vertical-align:middle;
}
div.notPage:hover{
background: rgb(100, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1); 
}
img{
border:0;
}
a{
text-decoration:none;
font-family: Lucida Bright;
color:white;
border:none;
border:0;
}

/* Home page bottom opaque bar */
#bottomSideBar{
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
width:100%;

height:39.58333333%;
margin-bottom:-30px;
}

#sidebar{
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
width:100%;
height:27.9605263157%;

}

#logo{
width:100%;
}
#bank{
position:absolute;
bottom:35px;
left:0px;
}

#main {
     /* must be same height as the footer */
    max-width:120em;
    }  

#side{position:relative;
float:left;
width:22.513089005%;
height:100%;
}

#footer {position: relative;
    margin-top: -35px; /* negative value of footer height */
    height: 35px;
    width:100%;
    float:none;
    background-color:black;
    color:white;

    } 

#foottext{
margin:0;
padding-top:8px;
}

#content{
position:relative;
margin-left:22.513089005%;
margin-bottom:-35px;
width:77.486910998%;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
}

table{
font-family:georgia;
}
.tickets{
border:1px solid #DEB887;
border-collapse:collapse;
padding:5px;
}
#tickets{
border:1px solid #DEB887;
border-collapse:collapse;
margin: 0 auto;
}


/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

/* slideshow css*/

#coin-slider{
border:2px solid white;
margin-top:10px;

}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }


#main,
#wrap,
#content,
#circusContent{
height:100%;

}

Answer 1

您可以使用绝对定位来粘合＆＃34;页脚底部的页脚。

#footer { position: absolute; bottom: 0; left: 0; width: 100%; }

Answer 2

稍微清理一下你的CSS。要实现粘性页脚，您可以更轻松地完成此操作。有很多样式增加了复杂性以实现基本相同的东西。

注意：目标是左侧列和内容列上的粘性页脚和100％高度背景（具有双重背景以使用透明背景颜色覆盖背景）

值得一读的参考文献： http://css-tricks.com/stacking-order-of-multiple-backgrounds/

html,body
{
  height:100%;
  margin:0;
  padding:0
}

#wrap
{
  min-height:100%;
  position:relative;
  overflow: hidden;
}
#wrap:before
{
  content: '';
  top: 0;
  left: 22.5131%;
  position:absolute;
  height: 100%;
  width: 77.4869%;
  background: url(http://24ari923j4ns2i5id6kb6bqt7v.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/Big-Apple-Circus-The-Tutu-Project-Group-Shot.jpg) no-repeat;
  z-index: -1;
}
#wrap:before
{
  content: '';
  top: 0;
  left: 22.5131%;
  position:absolute;
  height: 100%;
  width: 77.4869%;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))), url(http://24ari923j4ns2i5id6kb6bqt7v.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/Big-Apple-Circus-The-Tutu-Project-Group-Shot.jpg) no-repeat;
  background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url(http://24ari923j4ns2i5id6kb6bqt7v.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/Big-Apple-Circus-The-Tutu-Project-Group-Shot.jpg) no-repeat;
  background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url(http://24ari923j4ns2i5id6kb6bqt7v.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/Big-Apple-Circus-The-Tutu-Project-Group-Shot.jpg) no-repeat;
  background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url(http://24ari923j4ns2i5id6kb6bqt7v.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/Big-Apple-Circus-The-Tutu-Project-Group-Shot.jpg) no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=1 );
  z-index: -2;
}
#content {
  padding-bottom: 5em; /* level out negative margin footer */
}

#footer
{
  position:relative;
  margin:-3em 0 0;
  height:3em;
  width:100%;
  float:none;
  background-color:#000;
  color:#fff;
  clear:both;
}

http://fiddle.jshell.net/2Ddzd/22/
http://fiddle.jshell.net/2Ddzd/22/show/

Answer 3

删除height:100%的{{1}}并添加min-height，如下所示

#wrap

要使页脚粘到底部，请将其添加到样式表

#wrap{
    min-height:100%;
    overflow:hidden;
}

用半透明背景保持页脚向下

3 个答案: