尽管像<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 …

我确定我正在制作一个简单的错误,但我只是提醒$(window).height()并返回相同的值$(document).height().

我的浏览器窗口高度为13"MBA和窗口高度,最大值介于780px - 820px(大致)之间,但每次返回的窗口高度与文档高度相同.在网站的每个案例中,我正在处理的是超过1000px.

这里发生了什么？

alert($(window).height());
alert($(document).height()); 

我正在创建工具提示的动态定位,我先在jsfiddle上测试代码然后将我的代码放到我的网站上(在localhost上使用wordpress构建),在jsfiddle我的脚本是可行的但是当我把代码放到我的网站时,它不起作用(不是动态的铬)因为不同的结果$(window).height().你可以检查这个小提琴并尝试鼠标进入一个链接(第一个链接),然后看到登录控制台,窗口高度的结果是wh :667在我的网站窗口高度是wh :12024和wh : 11970(可更改)

jQuery(document).ready(function ($) {    
    $('a[rel="bookmark"]').mouseenter(function () {
        console.log($(window).height());
    })
});

也用这个

jQuery(function($){
  $(window).ready(function(){
    console.log($(window).height());
  });
  $(window).on('resize', function(){
    console.log($(window).height());
  });
});

谷歌浏览器

jsfiddle:667

我的网站(wordpress):12024 - 多变的

Mozilla的

jsfiddle:602

我的网站:585

我敢肯定,我添加了严格的doctype.

我找到了这个解释

$(window).height()是显示网站的视口的高度.(不包括工具栏和状态栏以及类似的东西)

$(document).height()是视口中显示的文档高度.如果它高于$(window).height()您获得滚动条滚动文档

我认为在我的网站上的结果$(window).height()是滚动条在chrome上滚动文档(我的网站有一个很长的页面).如果是这样,我怎样才能在我的网站上获得视口的高度,是否有另一种方法可以获得每个浏览器(chrome,mozilla,opera等)视口的相同结果(实际)高度？

注意:我不认为使用,screen.height因为它可以导致屏幕显示(包括浏览器的工具栏)