0

我正在尝试为页面设置液体布局，但在调整 div 的高度时遇到了很大的困难。我不想要一个固定的布局，因为我希望页面像手套一样适合，无论屏幕大小。我只使用百分比，没有像素或 em。页面布局如下所示：

header
wrapper
  left column, top
  left column bottom
  right column, top
  right column, bottom
footer

现在，我想制作左栏，页面顶部 50% 的高度和左栏，页面的其他 50% 高度。问题是内容溢出并被截断，迫使我使用滚动条并设置像素高度。这不是我想要的。理想情况下，我想将 div 设置为页面的 50%，并在内容溢出时使用滚动条。那有意义吗？

我该怎么做？我真的很感激任何帮助。

非常感谢。

4

1 回答 1

2

这将是更适合 jquery 的东西。您可以调用它来调整加载时的高度和调整窗口大小。

要获得窗口的高度和宽度，您将使用

windowHeight = $(window).height();
windowWidth = $(window).width();

你把它赋值给一个变量，然后减去页眉和页脚的高度。并通过使用设置css

${'#content_container').css({width: windowwidth+"px", height: windowHeight+"px"});

然后，如果有人调整窗口大小，您可以在如下函数中运行相同的选项

$(window).resize(function() {
 //update stuff
});

您的代码如下所示，但更改会对每个代码执行相同的操作。

$(document).ready(function(){
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

您可以通过分配变量并调用 $('#divid').height(); 来替换 100 的静态高度调用。由于您的标题是位置：绝对，如果您减去标题，那么您需要将 div 从顶部定位到相同的像素。

要调用 js，请在上面的 javascript 之前包含以下内容。

<script src="http://code.jquery.com/jquery-1.6.4.min.js" />
于 2011-11-07T07:22:26.183 回答