-2
良い日のエキスパートJavaScriptコードがフッタ内で実行されていません。CSS
私はCSSを初めて使用しています.Javascriptは私に同行してください。
私の必要条件は、フッターが常に下にとどまるような動的なページがあります。コンテンツが少なくても、フッタがページの最後まで、スペースが残っていなければならないより多くの内容はまた全体の内容を示した後に底部にあるべきである。
私は最後の数日間検索し、CSS Stickyフッターのようなさまざまな方法を見つけましたが、残念ながら私の問題を解決できませんでした。
もう一つの方法が使用している私は...を試してみました、私は下の使用bottom:0で常にフッターを維持するための2つの方法を発見したが、コンテンツが少ない場合にのみ、この1つが働いている（ページの半分を埋める）
flexこれは、コンテンツがページを超えている場合にのみ動作します。コンテンツが少ない場合、フッターが最後の行の後に正確に来るようになります（ページの中央にある可能性があります）。
私はページの各divの長さを見つけようとしており、実行時にどちらかを使用するために条件を適用しようとしました。これは私がCSSコードのフッタ内にJavaスクリプトコードを書く時に打たれているところです。実行されていない、コードがあります、助けてください。上記
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>
}
最初のコード例でJSとCSSを混在させましたか？それは不可能！ –
@ H.Pauwelynはい..実際に私はそれをやった...私は間違いをしたように見える..アドバイスありがとう。 – Siva