Question

我是CSS和JavaScript的新手。

我的要求是我有一个动态页面，其中页脚应始终保持在底部，让我更清楚，如果我有更少的内容，然后页脚应该在底部留空间直到页面结束，同时如果有更多在显示整个内容后，内容也应该在底部。

我搜索并找到了各种方法，比如CSS Sticky页脚，但遗憾的是无法解决我的问题。

我尝试过：

我找到了两种方法来保持页脚总是在底部使用bottom:0但是这个只在内容较少时填充（填充页面的一半）另一种方法正在使用flex这个工作正常只有当内容超出页面时，如果内容较少，则页脚恰好位于最后一行之后（可能位于页面中间）。

所以我试图找到页面每个div的长度，然后应用条件在运行时使用其中一个。这就是我陷入困境的时候，因为当我在CSS代码的页脚内编写JavaScript代码时没有被执行。

以下是代码：

footer{
    <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>
    }

如果我在脚本标记内写脚注，则不执行上面的内容。如果我不使用脚本标记，那么我可以使用代码。

完整代码：

<%@ 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>
    }

Answer 1

Javascript不会进入您的CSS，它会自带<script>标记，类似于CSS在自己的<style>标记中的行为。

此外，您的JavaScript也看起来不正确。你不能将javascript if/else逻辑与CSS混合在一起。你可以通过javascript用ele.setAttribute("style","clear:both;width:200px;")更改样式，但首先你应该阅读一个javascript教程来帮助你理解它的一般概念。

JavaScript代码不在页脚CSS中执行

1 个答案: