0

我正在尝试获得这种设计：

在此处输入图像描述

我只是不知道如何开始。我如何获得这个在我的脑海中没有意义。

有人能帮我吗？也许做一个快速的 jsFiddle，只需要基础知识。我想学习如何制作这样的布局，其中左侧菜单栏的 bg（或只是高度）与“DIV#2”的内容相同。

更新：

我试过@Josh Davies这样回答：

 <div class="container">
    <div class="row">
        <div id="wrapper">
            <div class="leftt">left content</div>
            <div class="rightt">right content</div>
        </div>
    </div>
 </div><!-- end container -->

   #wrapper{background-color:blue;width:100%;}
   .leftt{float:left;width:29%;}
   .rightt{float:left;width:69%;}

不幸的是，我只得到左侧边栏和正确的内容。不是顶部栏，也不是左侧菜单底部的小菜单。

4

5 回答 5

1

只需创建一个包装器并为包装器提供左侧 div 的背景颜色。然后定位左右 div 并给右 div 一个您选择的颜色。这样，当页面展开时，包装器也会展开。

希望这可以帮助！

于 2012-10-23T14:57:03.883 回答
1

有几种方法可以实现这一目标。您当然可以使用<table/>标签，尽管对此有些不满。谷歌虽然在云端硬盘中做到了。

在“现代”浏览器中，您还可以使用“table-cell”CSS 属性使您的 DIV 表现得像 TABLE，但这在旧版浏览器上并未得到广泛支持，而且恕我直言，这比使用平衡表更糟糕。

不过，您可以在 DIV 中，跨浏览器，在纯 CSS 中完成这一切，这需要强制它到全屏高度。这里有一个答案和 jsFiddle 示例，应该可以帮助您解决这个问题； https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033（我的回答不需要jQuery，尽管标题如此）。

您可能要考虑的另一件事是获取一个网格库，它将为您解决所有跨浏览器的问题。Twitter bootstrap 包含一个很好的网格库，但我更喜欢这个http://responsive.gs/，它更易于为您的表格配置，如上面的布局。您可能需要将两者结合起来以获得全屏高度，但让网格为您进行宽度布局。

于 2012-10-23T14:57:07.540 回答
0

没有最大宽度或最大高度之类的东西。最多您可以获得屏幕宽度/高度并将其用作最大宽度/高度。

在另一个站点上，您正在寻找某种布局系统。也许看看http://www.bramstein.com/projects/jlayout/

于 2012-10-23T14:56:30.623 回答
0

我将从这个结构开始：

<div class="containter">
   <div class="top-bar">
      ...
   </div>
   <div class="div1>
      ...
      <div class="bottom-menu">
         ...
      </div>
   </div>
   <div class="div2">
      ...
   </div>
</div>

然后你是 CSS 这将是起点：

.container { position: relative; }
.top-bar { position: absolute; top: 0; z-index: 5;}
.div1 { height: 100%; position: relative; }
.bottom-menu { position: absolute; bottom: 0; }

那将是一个非常基本的起点，您仍然需要为其设计样式。感觉听起来 Div2 将通过作为更大的元素来设置高度 Div1 应该继承父容器 div 的整体高度。

将 div 位置设置为相对将允许您将底部菜单类设置为底部 0 的绝对位置，以便无论高度如何，它都将保持在 div 的底部。

于 2012-10-23T15:09:28.453 回答
0

尝试类似：

演示：http: //jsfiddle.net/sEKtU/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #top {
        background: lightblue;
      }

      #inner-wrapper {
        position: relative;
      }

      #main {
        margin-left: 200px;
      }

      #main-inner {
        background: lightsteelblue;
        padding: 1px 0;
      }

      #left {
        background: lightSeaGreen;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 200px;
      }

      #left-menu {
        background: lightPink;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="top">
        top
      </div>

      <div id="inner-wrapper">
        <div id="left">
          <div id="left-content">
            left
          </div>

          <div id="left-menu">
            menu
          </div>
        </div>

        <div id="main">
          <div id="main-inner">
            <h1>Lorem ipsum dolor sit amet,</h1>
            <p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            At vero eos et accusam et justo duo dolores et ea rebum.
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem
            ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
            et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
            no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>​
于 2012-10-23T15:15:34.553 回答