相关疑难解决方法(0)
你如何让浮动元素的父母崩溃？
尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.
你怎么解决这个问题？
我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.
解决方案1
浮动父母.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？
解决方案2
给父母一个明确的高度.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.
解决方案3
在父元素中添加"spacer"元素,如下所示:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div …988
推荐指数
推荐指数
10
解决办法
解决办法
29万
查看次数
查看次数
如何强制子div为父div的高度的100%而不指定父级的高度？
我有一个具有以下结构的网站:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航位于左侧,内容div位于右侧.内容div的信息通过PHP引入,因此每次都不同.
我如何垂直缩放导航,使其高度与内容div的高度相同,无论加载哪个页面？
507
推荐指数
推荐指数
15
解决办法
解决办法
87万
查看次数
查看次数
拉伸子div高度以填充具有动态高度的父级
正如在下面的小提琴中可以看到的那样,我有两个divs,包含在父母中div,已经伸展到包含大div,我的目标是让这些孩子div的身高相等.
http://fiddle.jshell.net/y9bM4/
85
推荐指数
推荐指数
4
解决办法
解决办法
11万
查看次数
查看次数
为什么百分比高度不适用于我的div？
我有两个高度为90%的div,但显示效果不同.
我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.
有人能解释我为什么会遇到这个问题吗？
以下是我的代码:
<div style="height: 90%">
<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
</div>
</div>
48
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
如何使用包装器的整个高度浮动一个元素？
HTML:
<div class="wrapper">
<div class="left">
Foo
</div>
<div class="right">
Text row 1
</div>
</div>
<div class="wrapper">
<div class="left">
Foo Bar
</div>
<div class="right">
Text row 1<br>
Text row 2<br>
Text row 3
</div>
</div>
CSS:
.wrapper {
overflow:hidden;
}
.left {
width:80px;
float:left;
height:100%;
}
如何给浮动div提供包装器的整个高度(高度变化)？
没有jQuery可能吗？
27
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
为什么100%并不意味着100%的高度？
我试图让一些divss扩展以填满屏幕,但我正在努力.我已经解决了这个问题的问题.
我真正想知道的是,为什么当它的父元素具有相同的属性并且扩展时div,它的100%min-height不会扩展到那个高度(或者根本没有)？
<body>
<div>
stuff
</div>
</body>
body {
min-height: 100%;
background: red;
}
div {
min-height: 100%;
background: grey;
}
11
推荐指数
推荐指数
3
解决办法
解决办法
7315
查看次数
查看次数
内部div需要100%的高度
这是我的HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
容器高度为100%(我用Firebug检查过).但是#left_container需要100%也不是!
下面是我的CSS和截图.黄色应为100%.黄色是背景#left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
7
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
浮动div,100%高度
Ť
*****{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
list-style: none;
}
#footer-gradient {
position: relative;
width: 100%;
overflow: hidden;
padding: 0 18px;
margin-left: -18px;
background: -moz-linear-gradient(top, rgba(214,212,200,0.5) 0%, rgba(214,212,200,0.75) 25%, rgba(214,212,200,1) 50%, rgba(214,212,200,0.75) 75%, rgba(214,212,200,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,212,200,0.5)), color-stop(25%,rgba(214,212,200,0.75)), color-stop(50%,rgba(214,212,200,1)), color-stop(75%,rgba(214,212,200,0.75)), color-stop(100%,rgba(214,212,200,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* Opera 11.10+ */
background: …2
推荐指数
推荐指数
1
解决办法
解决办法
9241
查看次数
查看次数