css两栏布局,高度问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

css两栏布局,高度问题

2016-03-25 15:17:42 1604 1

问题描述:
css两栏布局,左侧为作为功能栏,右为内容栏

期望效果:
左栏黑色,右栏白色,背景鸟色,两栏的高度均为自适应。

  1. 当左、右栏内容高度均小于当前浏览器窗口高度时,实现左栏黑色填满当前浏览器窗口高度。
  2. 当右侧内容高度大于当前浏览器窗口高度出现时,实现左栏黑色填充的高度等于右栏的高度。
  3. 即无论什么时候,左栏黑色始终填满当前文档的最大高度,其下方不会出现背景的鸟色。

简单的 html 结构如下:

<div class="container">
    <div class="aside">黑猫</div>
    <div class="article">白猫</div>
</div>

可能是很简单的布局问题,但依然不耻下问,谢谢!

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:14:28

    -margin+padding
    http://jsfiddle.net/eedWk/12/点击预览

    http://jsfiddle.net/eedWk/12/show拖到地址栏看效果。点击按钮一次加300px,右栏增加到3000px以后,左栏若高度不够将无法自动填充到等于右栏。

    注意,CSS里面所有位置设置的3000px可变,但这个值必须提供,它正比于左栏自动能够填充到的最大可能高度。

    0 0
相关问答

1

回答

css元素的高度怎么自动扩充到100%

2016-06-06 10:28:29 1584浏览量 回答数 1

1

回答

Tengine concat 组合JavaScript和CSS文件问题-js报错

2020-06-01 17:39:13 405浏览量 回答数 1

1

回答

nginx反向代理后 js css文件不加载:配置报错 

2020-06-01 00:05:49 1252浏览量 回答数 1

1

回答

css 动画和 js 动画的差异

2019-11-21 18:30:06 770浏览量 回答数 1

1

回答

在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下

2019-11-19 18:10:28 1105浏览量 回答数 1

1

回答

为什么最好把CSS的<link>标签放在<head></head>之间?为什么最好把JS的<scri

2019-11-18 13:28:31 2441浏览量 回答数 1

0

回答

Xamarin WebView 使用 html+js+css如何开发app

2019-09-19 18:27:15 623浏览量 回答数 0

3

回答

[@小川游鱼][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

2018-12-16 03:12:33 2995浏览量 回答数 3

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

2018-10-27 21:52:43 149111浏览量 回答数 31

6

回答

是否有必要把JS和CSS文件都放在OSS?

2013-05-08 18:56:42 11795浏览量 回答数 6
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载