html高度设为自动,为CSS和HTML设置不同屏幕尺寸的自动高度和宽度

///更新的演示2手表解决方案

我希望这是您正在寻找的解决方案！ DEMO1 DEMO2

使用该解决方案，页面中唯一的滚动条位于中间的内容部分！

在该部分中使用侧边栏或任何您想要的内容构建您的结构！

您可以在此处使用该代码执行此操作：

Title

Dynamic menu

THE CONTENTS GOES HERE

Footer

用那个css：

.navTop{

width:100%;

border:1px solid black;

float:left;

}

.container{

width:100%;

float:left;

overflow:scroll;

}

.bottomFooter{

float:left;

border:1px solid black;

width:100%;

}

还有点jquery：

$(document).ready(function() {

function setHeight() {

var top = $('.navTop').outerHeight();

var bottom = $('footer').outerHeight();

var totHeight = $(window).height();

$('section').css({

'height': totHeight - top - bottom + 'px'

});

}

$(window).on('resize', function() { setHeight(); });

setHeight();

});

如果你不想要jquery

Title

NAV

SIDEBAR

CONTENTS

Footer

CSS

*{

margin:0;padding:0;

}

html,body{

height:100%;

width:100%;

}

body{

display:table;

}

.row{

width: 100%;

background: yellow;

display:table-row;

}

.container{

background: pink;

height:100%;

}

.content {

display: block;

overflow:auto;

height:100%;

padding-bottom: 40px;

box-sizing: border-box;

}

footer{

position: fixed;

bottom: 0;

left: 0;

background: yellow;

height: 40px;

line-height: 40px;

width: 100%;

text-align: center;

}

.sidebar{

float:left;

background:green;

height:100%;

width:10%;

}

.contents{

float:left;

background:red;

height:100%;

width:90%;

overflow:auto;

}