-3

HTMLとCSSを使用して、描写されたレイアウトを実現する方法を理解するために少なくとも10時間費やしましたが、何も思いつきませんでした。私は延々と検索してきましたが、多くの答えが近づいているように見えますが、それを適切に調整することはできません。

左側にヘッダー、フッター、メニューバー、メインコンテンツとしてナビゲーションバーを備えたマップを備えたシンプルなブラウザーアプリを作成したいと思います。マップを「オーバーフローするが非表示にする」だけでなく、コンテンツdivに制限する必要があります。そして、すべてが適切に収まるのであれば、スクロールバーがまったくなかったらいいのにと思います。これはCSSで可能ですか？

ここに画像の説明を入力してください

お願いします、私はここで死にかけています！

4

2 に答える 2

0

ほとんどの場合、問題はマップのコンテナdivにあるようです。次のようにCSSプロパティを設定してみてください。

.container {
 position: absolute;
 top: 100px; // Offset for the header 
 bottom: 100px; // Offset for the footer
 left: 200px; // Offset for the menu
 right: 0;
}

次に、地図を幅と高さを100％にして内側に配置します。

于 2013-03-22T23:15:18.760 に答える
0

もちろん、すべてを固定して配置することもできます。私には、そのようなものが必要なように聞こえます。（「スクロールバーがない、すべてが所定の位置に収まる」に関して。）それが必要な場合は、次のようにすることができます。

body,#header,#menu,#footer,#content {
  position:fixed;
  margin:0;
  padding:0; 
}
#header {
  top:0;
  left:0;
  right:0;
  width:auto;
  height:40px; 
}
#menu {
  left:0;
  top:45px;
  bottom:35px;
  height:auto;
  width:120px; 
}
#footer {
  bottom:0;
  left:0;
  right:0;
  width:auto;
  height:30px; 
}
#content {
  right:0;
  top:45px;
  bottom:35px;
  left:125px;
  min-width:200px;
  min-height:200px;
  height:auto;
  width:auto; 
}
#navbar {
  position:relative;
  height:30px;
  display:block;
  min-width:200px;
}
#map {
  position:absolute;
  top:30px;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:auto; 
}

このようなものを使用すると、すべての要素が所定の位置にとどまり、コンテンツだけがウィンドウに合わせてサイズ変更されます。私は認めなければなりませんが、私はあなたが要求したことの要点を実際には理解していませんでした。このようなものがあなたのニーズに合っていることを願っています。正直なところ、CSSの基本を学ぶ必要があるように思われるので、あなたの質問は少し奇妙だと思います。

于 2013-03-22T23:29:10.650 に答える