“Sticky Footer”下的差距 - 只有在我添加表格时才会出现？
我正在与我的表格与页脚之间的冲突进行斗争。我的最终目标是在产品页面上放一个简短的“粘性页脚”。产品包含在表格中。
正如我现在站立的那样 - 我几乎没有设法让我的页脚粘在视口的底部。我需要它缩短很多 - 当我改变它的“高度”尺寸时 - 而不是从顶部向下降低高度，它从底部向上收缩，产生难看的间隙。
这是我的源代码＆amp;样式表：
@charset "utf-8";
/* CSS Document */
html,
html* {box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%}
body {
font-size: 1vw;
background: rgba(0,0,0,1.00);
text-decoration: none;
padding: 0em;
margin: 0em;
float: inherit;
height: 100%
}
header {
position: fixed;
padding:0em;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
text-decoration: none;
color: transparent}
nav {
z-index: 400;
top: 0;
left: 0;
opacity; .100;
float: right;
display: inline-block;
width: 100%; height: 10%;
text-decoration: none;
font-size: 160%;
font-family: Centaur;
position: fixed;
color: transparent}
menu {
height: 5%;
display: inline-block;
float: right;
text-decoration: none; color: transparent;}
a href{color: black;}
@font-face {
font-family:Centaur;
src: url('your_font.ttf');}
p{color: black; text-decoration: none; font-size: 12px}
<style type="text/css">
ul {list-style: none;padding: 0%;margin: 0%;}
ul li {display: block;position: relative;float: left;border: 0%}
li ul {display: none;}
ul li a {display: block;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background-color:rgba(163,0,15,0.83);}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover {cursor: pointer;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
-o-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;}
li a:hover {background-color: rgba(118,118,118,1.00);
cursor: pointer;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
-o-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;}
#drop-nav li ul li {border-top: 0%;}
/* 2nd Level Drop */
#drop-nav li:hover ul ul {
left:-9999px; padding: 0; margin: 0; top: 0; display: block; position: absolute;
}
#drop-nav ul li:hover ul { display: block;
left:100%; padding: 0; margin: 0
top:0;
}
nav{float: right; padding: left: 70%}
swords{height: 25%}
jumper{height: 50%}
p1{font-size: 68%}
/*TESTERCODE*/
#container {min-height: 100%}
#footer {background-color: black; position: relative; height: 55px;}
margin-top; -55px; clear: both;}
#wrapper {min-height: 100%; position: relative}
/*TESTERCODE*/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 100px;
}
.site-footer {
background: black; text-align: center; color: lightgray; position: fixed;
} <!doctype html>
<html>
<head>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<!--scroll script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
} // End if
});
});
</script>
<!--end scroll script-->
<style type="text/css">
@import url("Centaur/stylesheet.css");
body,td,th {
font-family: Centaur;
font-size: larger;
}
body {
background-color: black;
}
/*hover*/
#productimg:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
td{height: 20%}
<style>
div#load_screen{
background: rgba(215,215,215,1.00);
opacity: 1;
position: fixed;
z-index:7000;
top: 0px;
width: 100%;
height: 1600px;
}
div#load_screen > div#loading{
color:rgba(215,215,215,1.00);
width:120px;
height:24px;
margin: 300px auto;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#4D4D4D;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
table {
font-family: arial, sans-serif;
width: 20%;
}
td, th {
text-align: left;
padding: 8px; height: 20%
}
tr:{
background-color: #dddddd;
}
</style>
<script>
window.addEventListener("load", function(){
var load_screen = document.getElementById("load_screen");
document.body.removeChild(load_screen);
});
</script>
<meta charset="utf-8"></meta>
<title>Albion-Swords/Swords</title>
<meta name="viewport" content="width=device-width">
<!--Style_Sheet-->
<link href="Albion Front Page Style Sheet.css" rel="stylesheet" type="text/css">
</head>
<body style="position: relative; width: 100%; height: 100%; background-image: url(images/m_whitedrop-Recovered.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;">
<div id="load_screen"><div id="loading"><h1 style="color: black">LOADING...</h1></div></div>
<div class="page-wrap">
<div style="width: 100%; padding-bottom: " id="main">
<div class="logodiv"></div><div id="imgjumpy" style="vertical-align: bottom"></div><!--Header!-->
<header style="border-top: medium; border-color: black">
<!--Navigation_Menu-->
<nav style="padding-left: 70%">
<ul id="drop-nav">
<li><a href="Albion Front Page.html" style="color: black;">Home</a></li>
<li><a id="products" href="Albion-Swords Sword Lines.html" style="color: black">Swords</a>
<ul>
<li><a href="Albion-Museum Line.html" style="color: black">Museum Line</a></li>
<li><a href="Albion-Swords Next Generation Line Swords.html" style="color: black">Next Generation</a></li>
<li><a href="Albion-Swords Squire Line Swords.html" style="color: black">Squire Line</a></li>
<li><a href="Albion-Swords Maestro Line Swords.html" style="color: black">Maestro Line</a></li>
<li><a href="#" style="color: black">Skirmish Line</a></li>
<li><a href="#" style="color: black">Special Edition</a></li>
</ul>
</li>
<li><a href="#" style="color: black">About</a>
<ul>
<li><a href="#" style="color: black">Media</a></li>
<li><a href="#" style="color: black">Story</a></li>
<li><a href="#" style="color: black">Gallary</a></li>
<li><a href="https://www.facebook.com/Albion-Swords-Limited-LLC-109838441137/" style="color: black">Facebook</a></li>
<li><a href="https://twitter.com/albionswords?lang=en" style="color: black">Twitter</a></li>
<li><a href="#" style="color: black">Testimonials</a></li>
</ul>
</li>
<li><a href="Albion News.html" style="color: black">News</a>
<li><a href="Albion Order.html" style="color: black">Order</a>
</nav>
<img src="images/Albion Web Logo.png" class="logo" style="z-index: 2000; width: 25%; padding-left: 3%; padding-top: 0% position: absolute"/></header>
<div name=tablecontainer style="padding-left: 30%">
<table style="float: left; width: 45%; height: 100%; position: absolute">
<td><br><h3 style="text-align: center"><img src="images/NEXTGENMARK.png" width="5%" height="auto" alt=""/>The Albion Mark Next Generation Line<img src="images/NEXTGENMARK.png" width="5%" height="auto" alt=""/></h3>
</h3></td><td></td>
<tr>
<td><h4 style="text-align: left"></h3><b>Iron Age & Roman Swords</b></h3></td>
</tr>
<tr>
<td><img style="float: right" style="" src="images/CHERUSKER.png" width="90%" height="auto" alt=""/></td>
<td style="width:20%"><p1 style="text-decoration: underline"><b>The Cherusker</b></p1><br><p1>Germanic War-Knife<br><b>$880.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right" src="images/AQUILIFER2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Aquilifer</b></p1><br><p1>Fulham Gladius<br><b>$770.00</b></p1></td>
<td></td>
</tr>
<tr>
<td><img style="float: right;" src="images/TIBERIUS2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Tiberius</b></p1><br><p1>Fulham Gladius II<br><b>$770.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/ALLECTUS2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Allectus</b></p1><br><p1>Mainz Gladius<br><b>$770.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/AUGUSTUS2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Augustus</b></p1><br><p1>Mainz Gladius II<br><b>$770.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/PEDITE2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Pedite</b></p1><br><p1>Pompeii Gladius<br><b>$770.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/TRAJAN2.png" width="83.5%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Trajan</b></p1><br><p1>Guttmann <br> Pompeii Gladius<br><b>$825.00</b> </p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/DECURIO2.png" width="100%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Decurio</b></p1><br><p1>(Roman Spatha)<br><b>$880.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/AUXILIA.png" width="100%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Auxilia</b></p1><br><p1>(Roman Spatha)<br><b>$880.00</b></p1></td>
</tr>
<tr>
<td><img style="float: right;" src="images/ALARISSKETCH2.png" width="100%" height="auto" alt=""/></td>
<td><p1 style="text-decoration: underline"><b>The Alaris</b></p1><br><p1>Spatha I <br> available for <br>
advance reservation<br><b>$880.00</b></p1></td>
</tr>
</table>
<!--END TABLE CONTAINER-->
</div>
<!--END TABLE CONTAINER-->
</table>
</div>
</div>
<footer class="site-footer"><br><br><div style="padding-left: 25%; padding-right: 25%; text-align: justify"><p1>Information sent to Albion Swords Ltd is kept strictly confidential. It is not shared or sold to other firms. Data may be used to send e-mail announcements which may be opted out of via email. Copyright (c) 2005: Albion Swords Ltd, LLC. This site and all pages and images contained therein unless otherwise indicated are property of Albion Armorers Swords Ltd, LLC and may not be reproduced or used without express consent. Site created and maintained by Howard & Amy Waddell & Cody Carter. Principal photography by: Leif Hansen, Søren Niedziella & Emma Martinson.</p1></div>
</footer>
</body>
</html>
我为混合代码道歉。我正在使用in-markup CSS以及样式表...
如果片段做了奇怪的事情，这里有一个截图：
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？