超简单的两列布局

supersimple2column.jpg

读者布雷克写道:

我想做的是一个相当标准的3节布局。 标题高度必须为75像素,宽度为100%。 在此之下,我需要一个宽度为160px的侧边栏部分和一个填充其余宽度的主要内容块。 到目前为止,还算标准……没有什么复杂的。 这是我无法正常工作的部分:我希望侧边栏和主要内容块填满屏幕的其余部分,即使没有内容强加它。 同时,如果没有其他需要滚动的内容,我真的不希望滚动条出现(因此,仅将底部2 div的高度设置为100%并处理多余的75px是不理想的因此,基本上我需要的是“最小高度:100%– 75px;”之类的东西,但是不幸的是,这是行不通的。

我可以使用表格或框架轻松地完成此布局,但是如果可能的话,我真的在争取100%CSS样式。 我已经搜索了您的档案和网络,但是似乎找不到使用CSS的不错的示例。 如果您有任何建议,我将不胜感激。

布雷克在这里苦苦挣扎的本质是“等高柱”问题。 您可以具有相对于其内容的元素,也可以设置静态高度。 两种方法都不理想,尤其是当布雷克想要做的只是“填满屏幕”时

解决方案是“人造柱”。 简而言之,由于背景图像,看起来像列的列。 然后,仅将侧边栏保留为透明背景,并使其随其需要而增长。

我整理了一个有关Blake的简单示例,如果有人想了解它并进行查看,也可以下载该示例。 我没有遵循的唯一指示是75px标头。 当用户增加字体大小时,设置这样的静态高度是个坏消息。 因此,我刚接触到字体大小/边距/填充,现在它会根据需要扩展。

[查看示例]

翻译自: https://css-tricks.com/super-simple-two-column-layout/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值