获取边栏高度至相等身高

我是新来的css，但有问题。我想让侧边栏内容高度与身体匹配或等于相同的高度。我使用目前但这只是为说明高度好：获取边栏高度至相等身高

min-height: 240px;

您可以在这里找到该网站：http://jsfiddle.net/ZPvLb/

向下滚动页面，直到看到身体和右边是侧边栏。看到不同？

任何建议或帮助我如何做到这一点？谢谢！

来源

2012-09-01 Frank G.

你可以尝试使用'height：100％' – undefined

既然你标记的jQuery有可能做到这一点使用JavaScript。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.content', '#side').height($('.content', '#main').height()); 
    }); 
</script>

这会将侧边栏内容高度与主内容高度相匹配。把它放在head标签中，并确保包含jQuery库。

正如已经指出的那样，纯粹的CSS解决方案将需要更多的工作。

这里是包含在jsfiddle

来源

2012-09-01 21:19:39 Brombomb

好吧我得到的语法，但我怎么实现，以CSS的侧边栏模式？新的jq！ –

根据您的意见更新解决方案 – Brombomb

真棒更容易！这是我的朋友非常感谢你!!!!!我相信这对于很多人来说很有帮助，希望能够做到这一点...... –

这被称为CSS的“圣杯”，出于很好的理由：这样做非常不直观，主要是因为CSS高度的工作方式。

虽然有希望，但马修泰勒对这个问题做了很好的评论，尽管我怀疑要使用他的解决方案，你需要编辑一下你的结构。

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

来源

2012-09-01 21:14:36

你好Sudden，但可以通过下面的Jquery更容易和更快地实现...但这有助于了解。非常感谢您的帮助！ –

@FrankG。，jQuery（甚至是JavaScript）是一个糟糕的解决方案。将JS用于布局代码意味着您的网站在JS禁用的浏览器上显得不可用，这可能不是您想要的。 –

是的，但同样可以与CSS一起去。比可以改变字体大小，颜色等......不幸的是浏览器给用户很多控制。 Cookie和JS不应再被禁用。技术越来越依赖于它们。至少这是我的意见！谢谢！ –

的变化，我不能相信的人实际上是关心的Javascript被禁用。这是一个不存在的问题。我同意FrankG。禁用JS甚至不应该成为一种选择。

永远不要担心用户没有启用JS，应该放在休息。

来源

2013-01-15 23:46:54 LCroonquist

许多解决方案都不起作用或太复杂。（令人沮丧的是，考虑到这对于表格来说非常简单）。

这通常是因为字体和图像在调整边栏大小之前没有机会加载，尤其是在连接速度较慢的情况下，主页已损坏。

首先，用CSS明确定义所有图像的宽度和高度。如果您没有指定图像的大小，浏览器无法知道页面将会有多高或多宽（用于包装文本）。

接下来，就网页字体而言，这是我的解决方案。只需用jQuery将您的内容“滑入”到位即可。这只需要在主页上发生一次。

$(function() { 
    $("#content").slideDown('slow').promise().always(function(){ 
     $("#sidebar").height($("#content").height()); // drop sidebar down 
    }); // Just show homepage content 
});

当然，您的页面将有所不同。这是一个更完整的example。

本质上，您的侧栏会在滑入到位后调整大小。这可以让你的边栏在你的字体有机会加载之前避免太短。

来源

2014-11-11 01:20:15

获取边栏高度至相等身高

回答

相关问题