Question

这让我发疯了，我只是无法让它按照我想要的方式工作（我试过搜索论坛但找不到修复我的代码的方法）。我希望我的页面布局为窗口高度的100％。

~~JSFiddle在这里：http://jsfiddle.net/JvPc2/3/embedded/result/显示问题~~

更新： JSFiddle在此处：http://jsfiddle.net/JvPc2/4/embedded/result/显示问题

一页的HTML如下：

<div id="wrapper">
        <div id="headcontainer" >
            <div id="headerleft">
                <h1>
                    Bringing Them Home
                </h1>
            </div>
            <div id="headerright">
                <h2>
                    Tagline to go here?
                </h2>
            </div>
            <div id="splitbar"></div>
            <div id="navleft">
                    <a href="/"><span class="outer"><span>Home</span></span></a><a href="the30.php"><span class="outer"><span>The 30</span></span></a><a href="thehall.php"><span class="outer"><span>Memorial Hall</span></span></a><a href="research.php"><span class="outer"><span>Research Page</span></span></a>
            </div>
            <div id="navright">
                    <a href="about.php"><span class="outer"><span>About</span></span></a><a href="tour.php"><span class="outer"><span>Virtual Tour</span></span></a><a href="schools.php"><span class="outer"><span>School Work</span></span></a><a href="links.php"><span class="outer"><span>Links</span></span></a>
            </div>
            <div id="splitbar"></div>
        </div>
        <div id="maincontainer" >
            <div id="maincontentleft">
                <p>
                    On this page you will find some relevant links to find out more information:
                </p>
                <p>
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                </p>    
            </div>
            <div id="maincontentright" >
                <p>
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                    <a href="/">Bringing Them Home site</a><br />
                </p>
            </div>
        </div>
        <div id="footercontainer">
        <div id="splitbar">
        </div>
            <div id="footerleft">
                <p>
                    &copy;Stefan Wright Web Design 2014
                </p>
            </div>
            <div id="footerright">
                <p>
                    Contact the webmaster <a href="mailto:webmaster@bringingthemhome.co.uk">here</a>.
                </p>
            </div>
        </div>
    </div>

CSS如下：

html{min-height:100%;position:relative}
body{background-image:url('../images/bg_leather.png');margin:0px;height:100%}
#wrapper{height:100%;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;}
#adminoverlay{z-index:10;width:100%;background:whitesmoke;position:relative;top:0;}
#adminoverlay p{margin:0px}
#headcontainer{width:100%;min-width:697px;height:20%;font-family:'MyUnderwood'}
#headerleft,#headerright{margin-bottom: 0px;text-align: center;background-image: url('../images/bg_content_rep.png');background-size: cover;width:48%;height:50%;min-height:62px;float:left;margin-left:1%}
#headerright h2{line-height: 2em;-webkit-margin-before: 0.80em;-webkit-margin-after: 0.80em;}
#navleft,#navright{width:48%;min-width:320px;height:40%;min-height:50px;margin-left:1%;float:left;font-family:'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-size: cover;}
#navleft a,#navright a{float: left;text-align: center;width: 21%;padding-left:2%;padding-right:2%;max-width: 131px;height:100%;font-size: 19px;color: black;}
#splitbar{background-image: url('../images/bg_content_top.png');background-size: cover;background-position: center top;height: 10%;width:100%;float: left;min-width:320px}
#maincontainer{width:100%;min-width:697px;min-height:68%;min-height:250px;clear:both}
#maincontentleft,#maincontentright{width:42%;min-width:320px;height:100%;margin-left: 1%;padding-left: 3%;padding-right:3%;float: left;font-size: 14px;font-family: 'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-repeat: repeat-y;background-position: left top;background-size: 100%;}
#footercontainer{width:100%;min-width:697px;height:10%;min-height:50px;clear:both}
#footerleft,#footerright{width:42%;min-width:320px;height:90%;margin-left:1%;float:left;font-family:'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-size: cover;padding-left:3%;padding-right: 3%;}

编辑：删除了网站网址并包含了JSFiddle。

Answer 1

懒惰解决方案

不要浪费你宝贵的时间，我建议去寻找一个JS解决方案，这将简单地获取父级的高度并减去除内容之外的所有容器。

其他解决方案

考虑更改包含背景的元素
使用flex拳击模型（定位最新浏览器时）
当你不关心保持精确的页脚和标题高度时，你可以选择所有元素的百分比高度。

Answer 2

经过一些修修补补后，我通过将maincontentleft和maincontentright div移出容器div来实现这一点。谢谢你帮忙

CSS强制页面至少为100％

2 个答案: