0

この例のような一部の Web サイトでは、検索、チャット、質問、タグなどのさまざまなオプションとリンクを表示する青いボックスの境界線が引き伸ばされ、ブラウザー ウィンドウに合わせられます。

divタグを使用して作成したWebページでそうしようとしましたが、ボックスを伸ばしてブラウザウィンドウに合わせることができませんでした。divタグでできますか？または、CSSなどの他の方法はありますか?

jQuery や AJAX を使用したくありません。

4

1 に答える 1

1

はい、DIV は端までいっぱいのナビゲーション メニューを作成するのに最適です。

発生する可能性が最も高い問題は、ルールを持つ別の DIV 内で DIV を作成しているという事実です。

例えば

CSS

.container {width:768px;}
.menu {width:1000px;}

HTML

<div class="container">
    <div class="menu">
    The Menu Would Go here
    </div>
</div>

上記の例でわかるように、コンテナー内にメニューがあります。コンテナーの幅が 768px であるため、最初のコンテナーによって設定された最大サイズが 768px であるため、メニューを 1000px にすることはできません。

現在、これを回避する方法がいくつかあり、position:absolute; を使用しています。

したがって、メニューの幅を 100% にしてエッジに到達させ、メニューを上部に配置したいとすると、CSS では次のようになります。

これを実践して何が起こるか見てみましょう。そうすれば、病棟から何をすべきかがわかります :P

CSS

.container {min-height:500px;background:#000;width:300px;margin:120px auto;}
.menu {
  position:absolute; /* Tells Menu to ignore the size and position of container */
  background:#CCC;
  width:100%; /* This tells the the Div to be 100% in Width */
  top:0; /* This sets the menu to the top increase number for distance */
  left:0; /* This sets where it should start from left to right */
  height:100px; /* This sets the height of the menu */
  }

これは、私が作成した例のデモです: http://jsfiddle.net/9j2pa/ で遊んで、何が起こっているのかに慣れてください。

さらに、次のように、いつでも MENU をコンテナーの外に移動できます。

<div class="menu">
The menu is not contained within the container and width:100% will work.
</div>
<div class="container">
The rest of the site is contained within here
</div>
于 2013-01-24T20:59:34.600 に答える