求助这种布局的改进方案

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

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

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

javascript css html

html5

java

阅读 2.3k

3 个回答

zengkan

✓ 已被采纳

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

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

stardew

6.1k41633

发布于
2017-02-17

谢邀！
没有ie8，没法看效果，你试试这个。
https://jsfiddle.net/stardew/...

wangbeggar

93922136

发布于
2017-02-17

<!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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

求助这种布局的改进方案

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

小网站有必要将图片放到阿里云OSS存储吗？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

Spring中的两个疑惑?

前端代码更新如何通知用户刷新页面？