我对一切都很陌生，并试图实现标题，2个不同宽度的框和一个页脚。所有的东西都在一起，但是我需要这样，当框中的内容改变时，高度总是保持不变。
我已经尝试实现flexx，但不能使它工作。我不允许在这个项目上使用溢出。我应该尽可能多地使用浮点数!
我想实现的外观像这张照片我附上在这里:输入图片描述
现在的样子:输入图片描述
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie <a href="images/dollar.png">zombies</a> ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>
我的CSS:
@font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}
我已经尝试实现flexx，但不能使它工作。我不允许在这个项目上使用溢出。我应该尽可能多地使用浮点数!
也许这个简单的Flexbox布局可以作为一个起点?根据期望的布局图像，它似乎复制了相当接近。nav元素似乎包含了并不真正构成导航的内容，因此删除了这些内容，但可以很容易地插入到LHS部分或标题中。
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
width: 80%;
height: 100vh;
margin: 0 auto;
}
header,main,footer,main>section {
display: flex;
margin: 0;
border: 1px solid rgba(133, 133, 133, 0.5);
}
header {
flex: 2;
order: 1;
align-items: center;
justify-content: center;
}
main {
flex: 10;
order: 2;
}
footer {
flex: 1;
order: 3;
align-items: center;
justify-content: center;
}
main>section:nth-of-type(1) {
flex: 10;
order: 1;
}
main>section:nth-of-type(2) {
flex: 4;
order: 2;
}
/* ONLY for visually identifying elements */
header {
background: azure
}
main {
background: yellow
}
footer {
background: pink
}
main>section:nth-of-type(1) {
background: rgba(0, 255, 0, 0.25);
}
main>section:nth-of-type(2) {
background: rgba(255, 0, 0, 0.25);
}<div id='wrapper'>
<header>#header#</header>
<main>
<section>#LHS-Large#</section>
<section>#RHS-Small#</section>
</main>
<footer>#footer#</footer>
</div>