让右侧的 Div 填满所有可用空间

2024-05-01

我想创建两个并排的 div,但我希望左侧的 div 为 300px,右侧的 div 占据屏幕上的剩余部分。这怎么可能呢?谢谢!


最直接的(我会说正确的)方法是使用display: table:

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
    color: white;
}
#left {
    background: blue;
    width: 300px;
}
#right {
    background: red;
}

<section id="wrapper">
    <aside id="left">Left 300px</aside>
    <div id="right">Right the rest</div>
</section>

http://jsfiddle.net/YbLZE/1/ http://jsfiddle.net/YbLZE/1/

尝试调整右下框架的大小。

更新为HTML5元素section and aside,如果您有一个,则应该使用HTML5 doctype。我必须记住使用那些...

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

让右侧的 Div 填满所有可用空间 的相关文章

  • JQuery 可搜索下拉框

    我有一个可搜索列表 是使用 JQuery 插件创建的 http plugins jquery com searchit http plugins jquery com searchit 但我希望当列表框第一次出现时默认选择一些值 即使我在选
  • CSS“内容”不起作用

    我想通过 CSS 添加该段落的文本 而不是在 HTML 中 因为它会随着网站的响应能力而变化 现在我无法让它工作 我想知道CSS是否有问题 另外 这是唯一可以做到的方法 使用纯 HTML 和 CSS 还是有另一种方法来定位文本并根据每个分辨
  • Tomcat 基本 URL 重定向

    使用tomcat 如何获取请求http www mydomain example重定向到http www mydomain example somethingelse index jsp 我什至没有设法获得要显示的index htmlhtt
  • 使用 CSS 的样式选择选项

    我正在尝试使用 CSS 设置选择选项列表的样式 我希望列表的时间之间有更多的填充 因为它们似乎被压在一起 我尝试向选项元素添加填充 但这似乎不起作用 有任何想法吗 这是我的代码 HTML
  • 如何以编程方式禁用 元素上的自动选择?

    然后用户使用 TAB 或 SHIFT TAB 跳转 到某个文本框 并且该文本框恰好有一个值 那么该值将被自动选择 我想禁用此行为 我认为这可以在 focusin 事件处理程序内部完成 input text focusin function
  • html 可嵌入 flash wav 播放器

    我需要一个可在 IE FF 和 Chrome 中播放 wav 文件的嵌入式音频播放器 目前无法转换为 mp3 或任何其他格式 该播放器应该非常简单 只有一个播放 暂停按钮 也许还有一个时间轴栏 用户可以单击该时间轴栏来转到音频的特定部分 还
  • 如何在FireFox中检查用户访问麦克风的权限是否被拒绝

    有没有办法查明用户是否拒绝或允许媒体设备的权限 例如 Firefox 中的麦克风 摄像头 在 Chrome 中 我可以使用 navigator permissions query 检查这一点 但在 Firefox 中会失败并出现 TypeE
  • 具有自定义设计的 ASP.NET 复选框

    有没有办法改变asp net复选框的ui样式 我试过这个 cabeceraCheckBoxNormal background url ig res Default images ig checkbox off gif no repeat c
  • 如何在购物车中显示自定义属性(Magento)

    我尝试了很多东西 但没有一个起作用 我想我可以在产品页面上获取自定义属性 但我想知道 如何在购物车页面中获取它们 属性只是简单的文字 item gt getProduct gt load 将从数据库重新加载所有产品数据 虽然这可行 但请记住
  • 使用条件注释的目的