0
我正在使用基本模板的網頁上工作。html內容的動態高度
它有一個標題，頂部導航，側面導航，主要內容區域和頁腳。
我在jsfiddle中創建了一個類似的設計，雖然它看起來與我在html中看到的不同。這裏是鏈接：https://jsfiddle.net/f4sc9sy7/8/
這裏是我的代碼：
$(document).ready(function(){
$(".top-menu").click(function(e){
// set selectd menu as active
$(".top-menu").removeClass("active");
$(this).addClass("active");
});
// main view area height
var footerHeight = $("footer").outerHeight();
var headerHeight = $("header").outerHeight();
var menuHeight = $("#top-nav").outerHeight();
var htmlHeight = $("html").outerHeight();
var mainWindowHeight = htmlHeight - (footerHeight + headerHeight + menuHeight);
//how to remove this hard coding?
$("#main-layout").outerHeight(mainWindowHeight-41);
});html {
background: #F5F4EF;
color: #000305;
margin: 0;
padding: 0;
width: auto;
}
#side-nav {
float: left;
width: 20%;
height: inherit;
background: lavender;
}
#main-content {
float: right;
width: 80%;
height: inherit;
background: lightgreen;
}
header,
footer {
background-color: black;
color: #F5F4EF;
width: auto;
text-align: center;
margin: 0;
height: 5%;
padding: 0;
}
#top-nav {
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}<html>
<head>
<title> Test HomePage </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<header>
<h1> Header </h1>
</header>
<div id="top-nav" class="topnav">
<a class="top-menu" href="#home">Home</a>
<a class="top-menu" href="#news">News</a>
<a class="top-menu" href="#contact">Contact</a>
<a class="top-menu" href="#about">About</a>
</div>
<div id="main-layout">
<div id="side-nav">
Side Navigation
</div>
<div id="main-content">
content
</div>
</div>
<footer>
<h1>Footer </h1>
</footer>這裏有兩個問題：
我想設置主要內容的div的高度動態。我希望使用javascript和相關屬性來設置頁面的高度。由於某些未知原因，元素之間存在差距（可能是由於邊距或填充）。如何刪除這個？
如何使這個HTML跨瀏覽器，使其適用於所有主流瀏覽器？
感謝
更新：我已經更新我的樣式表。刪除了高度設置的javascript代碼。以下是更新的鏈接：https://jsfiddle.net/f4sc9sy7/9/。
這現在看起來很接近預期的佈局。現在只有一個總的html高度問題。它超越了瀏覽器的高度，不知道如何糾正它。
這裏是CSS代碼：
html {
background: #F5F4EF;
color: #000305;
margin: 0;
padding: 0;
width: auto;
height: 100%;
}
body{height: 100%;}
#side-nav {
float: left;
width: 20%;
height: 100%;
background: lavender;
}
#main-content {
float: right;
width: 80%;
height: 100%;
background: lightgreen;
}
header,
footer {
background-color: black;
color: #F5F4EF;
width: auto;
text-align: center;
margin: 0;
height: 5%;
padding: 0;
}
H1 { margin:0; }
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#main-layout{
height: 90%;
margin:0;
}
一般來說，儘量只用CSS來管理風格，佈局和流。混合使用CSS和JavaScript之間的風格從長遠來看將變得難以管理，最壞的情況可能會開始干擾彼此的指示。 – Nope
要移除元素之間的空間，您需要從H1中刪除邊距。 'H1 {margin：0; }'。這會導致'main-layout'的大小問題，因爲高度是負值。 「主佈局」應該有多高？ – erikscandola
感謝您的回覆。我已經添加了保證金：0。它消除了差距。我的目標是使佈局動態化。我使用css來控制外觀和使用javascript來控制元素空間。我的CSS與JavaScript代碼衝突嗎？ – kromastorm