JavaScript代码未在页脚CSS中执行
我不熟悉CSS和JavaScript 我的要求是我有一个动态页面，其中页脚应该始终位于底部，让我更清楚地说明，如果我有较少的内容，那么页脚应该在底部留下空间，直到页面结束，同时，如果有更多的内容，那么在显示整个内容后，页脚也应该在底部 我搜索并找到了各种方法，比如CSS Sticky footer，但不幸的是无法解决我的问题 我所尝试的： 我发现了两种方法可以使页脚始终位于底部使用JavaScript代码未在页脚CSS中执行,javascript,html,css,Javascript,Html,Css,我不熟悉CSS和JavaScript 我的要求是我有一个动态页面，其中页脚应该始终位于底部，让我更清楚地说明，如果我有较少的内容，那么页脚应该在底部留下空间，直到页面结束，同时，如果有更多的内容，那么在显示整个内容后，页脚也应该在底部 我搜索并找到了各种方法，比如CSS Sticky footer，但不幸的是无法解决我的问题 我所尝试的： 我发现了两种方法可以使页脚始终位于底部使用bottom:0，但这一种仅在内容较少（占页面的一半）时有效，另一种方法是使用flex这一种仅在内容超过页面时有效，
bottom:0flexfooter{
<Script>
var x=document.getElementById("toppart").clientHeight;
document.getElementById("toppart").innerHTML = x;
var y=document.getElementById("bottompart").clientHeight;
document.getElementById("bottompart").innerHTML = y;
if (+x + +y < screen.Height){
then{
clear: both;
<!--position: absolute;-->
<!-- bottom: 0; -->
left:0;
right:0;
padding: 1rem;
color: white;
background-color: black;
text-align: center;
width:100%;
min-height: 100%;
display: flex;
<!--min-height: 100vh; -->
flex-direction: column;
}
else{
clear: both;
position: absolute;
bottom: 0;
left:0;
right:0;
padding: 1rem;
color: white;
background-color: black;
text-align: center;
width:100%;
}
</Script>
}
页脚{
var x=document.getElementById（“toppart”）.ClientHight；
document.getElementById（“toppart”）.innerHTML=x；
变量y=document.getElementById（“底部”）.clientHight；
document.getElementById（“bottompart”）.innerHTML=y；
如果（+x++y<屏幕高度）{
然后{
明确：两者皆有；
左：0；
右：0；
填充：1rem；
颜色：白色；
背景色：黑色；
文本对齐：居中；
宽度：100%；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
}
否则{
明确：两者皆有；
位置：绝对位置；
底部：0；
左：0；
右：0；
填充：1rem；
颜色：白色；
背景色：黑色；
文本对齐：居中；
宽度：100%；
}
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html min-height:100%;box-sizing: border-box;>
<head >
<style >
div.container {
width: 100%;
<!--border: 1px solid gray;-->
}
div.toppart{
width: 100%;
height: 50%
border: 1px solid red;
}
div.bottompart{
width: 100%;
height: 50%
}
/*div.middlepart{
width: 100%;
height: 50%
} */
*,
*:before,
*:after {
box-sizing: inherit;
}
header {
padding: 1em;
color: white;
background-color: black;
<!--clear: left;-->
text-align: center;
}
footer{
<Script>
if(5+5<5)
then{
clear: both;
<!--position: absolute;-->
<!-- bottom: 0; -->
left:0;
right:0;
padding: 1rem;
color: white;
background-color: black;
text-align: center;
width:100%;
min-height: 100%;
display: flex;
<!--min-height: 100vh; -->
flex-direction: column;
}
else{
clear: both;
position: absolute;
bottom: 0;
left:0;
right:0;
padding: 1rem;
color: white;
background-color: black;
text-align: center;
width:100%;
}
</Script>
}
分区集装箱{
宽度：100%；
}
最高部{
宽度：100%；
身高：50%
边框：1px纯红；
}
下半部分{
宽度：100%；
身高：50%
}
/*中段{
宽度：100%；
身高：50%
} */
*,
*：之前，
*：之后{
框大小：继承；
}
标题{
填充：1em；
颜色：白色；
背景色：黑色；
文本对齐：居中；
}
页脚{
如果（5+5
左：0；
右：0；
填充：1rem；
颜色：白色；
背景色：黑色；
文本对齐：居中；
宽度：100%；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
}
否则{
明确：两者皆有；
位置：绝对位置；
底部：0；
左：0；
右：0；
填充：1rem；
颜色：白色；
背景色：黑色；
文本对齐：居中；
宽度：100%；
}
}
此外，您的javascript看起来也不正确。您不能将javascript
if/elseele.setAttribute（“style”、“clear:both；width:200px；”）更改样式