求助这种布局的改进方案

布局的目的是为了让main区域自适应剩余宽度,唯一的一点是要留出aside占用的宽度,我是用定位做的,但是感觉不自然,有更好的解决方案吗?需要兼容ie8

https://jsfiddle.net/gaoqiang...

下面有些朋友的aside块当屏幕拉伸至最小宽度时,会贴着窗口向左覆盖main块的内容,这样太尴尬了,正常情况下,当屏幕小于最小宽度时,aside不应该跟着窗口跑啊

阅读 2.3k
3 个回答

http://codepen.io/zengkan0703...
h1 元素默认宽度为100%,设置 overflow:hidden 属性就创建了一个新的 BFC(块格式化上下文,关于这个可以谷歌或者看我的文章),同时定宽的元素向右浮动,由于 BFC 不会与浮动区域重合,所以自适应的这个块会重新计算宽度。

其中一个重点是,定宽元素需要写在自适应元素之前,也就是需要优先渲染浮动元素,否则没有用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
*{
    box-sizing: border-box;
}
html, body{
    font-family: 'Ubuntu Mono';
    height: 100%;
}
.main{
    position: relative;
    top: 0;
    left; 0;
    min-width: 500px;
    min-height: 100%;
    padding: 10px;
    margin-right: 240px;
    background: #eee;
}
h1{
        margin: 0;
    }
 .aside{
        float: right;
        width: 120px;
        height: 120px;
        padding: 10px;
        background: #eee;
    }
    
</style>
<body>
<div class="aside">
    <h2>aside</h2>
</div>
<div class="main">
  <h1>main</h1>
</div>

</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题