1

私は現在新しいウェブサイトに取り組んでいます: http://maartenlodewijk.nl/2013/

右側のライト グレーのバー ("test" という単語が入っている) は、私のナビゲーション バーであるはずです。ページの高さ（ブラウザの高さだけでなく、ページ全体）を満たす高さを取得するために何日も試みてきました。私が作ったこのモックアップのように: http://i.imgur.com/Knjlc.jpg

body と html の高さを 100% に設定するなどの単純な方法 (うまくいきません) や、ejeliot.com/samples/equal-height-columns/example-7 のような CSS ハックなど、複数の方法を試しました。 html (これは機能しますが、ハックは本当に最後の手段です)

これが私のHTMLとCSSコードです。ご参考までに: はい、ラッパーとコンテナー div の両方があります。ラッパーはコンテナーを中央に配置し、コンテナーはラッパー内の固定位置を維持します。

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="navigation">
    test
</div> <!-- end navigation -->

<div id="wrapper">
<div id="container">
    <div id="header">
    <img src="images/headerpng.png" alt="Logo" border="0" />
    </div> <!-- header -->
    <div id="weclome">
    <img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication &amp; Multimedia Designer" /></div><!-- end welcome -->
    <div id="content">
        <div id="leftcolumn">
            <h1>HEADER</h1>
                <p>TEXT</p>

                <p>TEXT</p>

                <p>TEXT</p>
            </div><!-- end leftcolumn -->

    <div id="rightcolumn">
        <h1>Contact</h1>
            <table width="286" border=0>
            <tbody>
            <tr>
                <td width="96">Mail:</td>
                <td width="180" class="rightalign">mail@maartenlodewijk.nl</td>
            </tr>
            <tr>
                <td>Telefoon:</td>
                <td class="rightalign">+31 6 348 268 52</td>
            </tr>
            </tbody>
            </table>
        <h1>HEADER</h1>
        <p>TEXT</p>

        <p>TEXT</p>

        <p>TEXT</p>


      </div><!-- end rightcolumn -->
    </div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->

</body>
</html>

CSS

/* ----- TAGS -------*/

body {
    font-size: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Georgia, "Times New Roman", serif;
    background: #e8e8eb url(images/bg.png) repeat-y;
    color: #666666;
}

html{
}
h1{
    font-size: 150%;
    color: #ff3366;
    padding-top:30px;
}



/* ----- LAY OUT -----*/
#wrapper{
    width:955px; 
    margin-left:auto;
    margin-right:auto;
}

#container{
    width:645px;
    margin-left:20px;
}

#content{
    padding: 0px 20px 0px 20px;
}

#navigation{
    position:absolute;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}


#leftcolumn{
    width:286px;
    float:left;
}

#rightcolumn{
    width:286px;
    float:right;
}

/* ----- CLASSES -----*/
.rightalign{
    text-align:right;
}
4

5 に答える 5

0

背景色を追加してご覧ください#wrapper。エリア内に#leftcolumnあり#rightcolumnません。#wrapper多分これはあなたのテンプレートの問題です。修正後、ご確認ください。

それがうまくいかない場合は、jQuery を使用して高さを動的に取得し、ナビゲーションの高さを設定できます。

于 2012-04-24T10:47:44.123 に答える
0

あなたのレイアウトを見た場合は、#navigation DIV の代わりに与えるとよいでしょうposition:fixed。次のように書きます。position:absolute;

#navigation{
    position:fixed;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}
于 2012-04-24T10:44:15.720 に答える
0

同じ高さが必要な場合は、このクラスを適用#navigationし、#wrapper.equal_height

ライブラリファイルでこのjquery関数を使用する

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".equal_height"));
});

お役に立てますように。

于 2012-04-24T10:57:01.847 に答える
0

body タグに背景画像を使用しているこのレイアウトには大きな問題があり1920x99ます。これは、体がこのセクションにのみ反応しているためです。

いくつかの簡単な変更により、これが正常に機能します。添付の出力を参照してください。開発者ツールでこれらの簡単な変更を行いました。レイアウトを再構築して、すべてをラッパー内に配置し、ナビゲーションおよびその他のセクションにフロート、位置を使用する必要があります。

レイアウトで何も連携していない場合は、レイアウトを再構築して、すべてのセクションに適切なスタイルを使用する必要があります

ここに画像の説明を入力

于 2012-04-24T10:48:23.813 に答える
0

メニューを常に表示したい場合は、以前の回答のソリューションを使用することをお勧めします。

スクロール後にサイドバーを拡張したいだけの場合は、いわゆるを使用する必要があります。css equal height columnsその例を次に示します: http://www.vanseodesign.com/css/equal-height-columns/

于 2012-04-24T10:50:15.390 に答える