Question

我正在使用基本模板的网页。

它有标题，顶部导航，侧面导航，主要内容区域和页脚。

我在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;
}

Answer 1

将height:100%;添加到您的html

html {
  background: #F5F4EF;
  color: #000305;
  margin: 0;
  padding: 0;
  width: auto;
  height:100%;
}

Fiddle

Answer 2

#main-layout {
  min-height:100px;
}

html内容的动态高度

2 个答案: