Question

过去几个小时我一直在努力创建一个动态大小的网页设计，但没有运气。

这是我想要做的事情的图片：

enter image description here

基本上，我有一个标题（在顶部）和页脚（在底部）有设置的高度。我想在它们之间有两个div，一个菜单和内容区域，它们在页眉和页脚之间动态调整大小（高度方向）。当我调整网站大小时，我希望菜单和内容也要调整大小，以便它们仍然适合。如果内容区域或菜单中的内容高于实际div，则会出现滚动条（溢出：自动）。

任何人都可以帮助我吗？

由于

Answer 1

我的多栏布局：Ultimate multi-column liquid layouts。

Answer 2

我建议你使用Bootstrap（http://getbootstrap.com/getting-started/）。如果您在示例下搜索，您肯定会找到符合您需求的内容。

否则，您会在CSS和JavaScript下找到预定义的类。引导程序中的所有元素都是响应式的，并且大小与屏幕/浏览器窗口的大小相同。您可以在下面看到代码中的示例。

  <body>
<!--[if lte IE 8]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="header">
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#/">Template App</a>
      </div>

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li class="active"><a href="#/">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#/data">Table</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
<div ng-view=""></div>
</div>

<div class="footer">
  <div class="container">
    <p>Footer</p>
  </div>
</div>

Answer 3

我想您不想使用表格，但这似乎是实现您想要的最简单的方法，在左右列中使用iframe。

但是你也可以使用位置为绝对的div，因为你已经有了标题的高度和左列的宽度为绝对值。简单地将右列div相应地从顶部和左侧偏移像素数。

Answer 4

要在左侧和右侧面板上获得滚动条，我认为最简单的方法是使用框架。框架是一种痛苦（或窗格......），但它们确实给出了无痛的滚动条。

动态大小的网页设计

4 个答案: