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/>もちろん、眉をひそめているタグも使用できます。ただし、Googleはドライブでそれを行います。

「最新の」ブラウザでは、「テーブルセル」CSSプロパティを使用してDIVをテーブルのように動作させることもできますが、これはレガシーブラウザでは広くサポートされておらず、IMHOはテーブルをバランスよく使用するよりも悪いハックです。

ただし、すべてをDIVで実行できますが、クロスブラウザーでは、完全な画面の高さに強制する必要がある純粋なCSSで実行できます。ここに答えがあり、これに役立つjsFiddleの例があります。 https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033（タイトルにもかかわらず、私の答えはjQueryを必要としません）。

あなたが考慮したいと思うかもしれないもう一つのことは、グリッドライブラリをつかむことです。それはあなたのためにすべてのクロスブラウザのものを解決するでしょう。Twitterのブートストラップには優れたグリッドライブラリが含まれていますが、上記のレイアウトのようにテーブルの構成がはるかに簡単なこのhttp://response.gs/をお勧めします。全画面の高さを取得するために2つを組み合わせる必要があるかもしれませんが、グリッドに幅のレイアウトを任せてください。

于 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; }

これは非常に基本的な出発点であり、スタイリングを行う必要があります。Div1 が親コンテナ div の全体的な高さを継承する必要があるより大きな要素であることによって、Div2 が高さを設定しようとしているように聞こえます。

Div の位置を相対に設定すると、bottom-menu クラスを絶対位置の bottom 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 に答える