Question

我正试图获得这个设计：

enter image description here

我根本不知道如何开始这个。对我如何获得这一点没有任何意义。

有人能帮助我吗？也许做一个快速的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%;}

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

Answer 1

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

希望这有帮助！

Answer 2

有几种方法可以实现这一目标。当然，你可以使用<table/>标签，尽管有些人不屑一顾。谷歌在Drive中做到了。

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

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

您可能想要考虑的另一件事是抓住一个网格库，它将为您提供所有交叉浏览器的功能。 Twitter引导程序包含一个很好的网格库，但我更喜欢这个http://responsive.gs/，这对于像上面的布局这样的表来说要简单得多。您可能需要将两者结合起来才能获得全屏高度，但让网格为您进行宽度布局。

Answer 3

没有最大宽度或最大高度。最多可以获得屏幕宽度/高度，并将其用作最大宽度/高度。

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

Answer 4

我从这个结构开始：

<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位置设置为relative将允许您将底部菜单类设置为底部0的绝对位置，以便无论高度如何，它都将保留在div的底部。

Answer 5

尝试类似：

演示：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>

创建100％高度的基本设计

5 个答案: