请问老师如果想用定位去实现圣杯布局，高度问题应该怎么解决啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
min-width: 800px;
}
.main {
padding: 0 200px;
min-height: 300px;
position: relative;
}
.top {
height: 120px;
background: #333;
}
.top img{
float: left;
height: 120px;
}
.top ul {
list-style: none;
float: right;
margin-right: 40px;
}
ul li{
display: inline-block;
color: #fff;
height: 120px;
line-height: 120px;
padding: 0 15px;
}
.top li:hover {
cursor: pointer;
color:orange;
}
.left {
width: 200px;
background: #000;
position: absolute;
color:white;
left:0;
min-height: 300px;
}
.right {
width: 200px;
background: #000;
position: absolute;
color: white;
right: 0;
min-height: 300px;
}
.middle {
width: 100%;
left: 200px;
position: absolute;
min-height: 300px;
}
.foot{
height: 120px;
background-color: #333;
width: 100%;
}
.foot ul {
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/>
<div class="nav">
<ul>
<li>一</li>
<li>一二</li>
<li>一二三</li>
<li>一二三四</li>
<li>一二</li>
</ul>
</div>
</div>
<div class="main">
<div class="middle"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="foot">
<ul>
<li>一</li>
<li>一二</li>
<li>一二三</li>
<li>一二三四</li>
<li>一二</li>
</ul>
</div>
</body>
</html>
我把main设为relative，给了最小高度300，left,middle,right都是绝对定位。但是中间的图片会超出。 请问高度问题怎么解决比较好呢
正在回答
同学你好，
如果不设置高度为100%的话，只能设置main盒子高度大于等于图片高度了。因为middle，left和right三部分设置了绝对定位，脱离了文档流，main盒子高度撑不起来，所以就需要设置高度才可以。
‘追彩虹的小狐狸’老师说的高度本来就会有它里面的内容撑开，所以我们不用设置的意思是，middle，left和right不需要设置高度：
盒子会由里面内容撑开。但是main盒子不可以不设置高哦。
自己可以再测试下，祝学习愉快！
同学你好， 首先我们要明白一点， 圣杯布局之所以被称为圣杯布局，因为它是由前辈们总结下来的一套固定的布局实现方法， 所以我们必须按着浮动加相对定位的方式去实现。像同学这种使用绝对定为实现的布局，就不能被称作圣杯布局了哦。
然后， 我们再来根据同学的这种写法分析问题，高度设置百分比是参照父元素高度计算的， 但是因为body和html默认高度为0，他的高度是由子元素内容撑开的，所以直接设置height:100%；不可以。
可以参考如下方式， 给html，body同时设置百分百高度
这个时候在调整main和他下面子元素的height值
其实使用这种方式实现也会有一些缺陷，当中间内容超出一屏高度之后， 会出现问题， 所以我们一般不会这样设置， 因为高度本来就会有它里面的内容撑开，所以我们不用设置，高度也会自适应哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
好像Main这部分只能固定高度
我试着加上height:100%也还是不行
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星