0

私は4つのdivで構成されるウェブサイトのレイアウトを持っています。

<div class="global">
<div class="content">
</div>
<div class="top">
</div>
<div class="footer">
</div>
</div>

次のスタイルが適用されています

div.top{
position:fixed;
top:0px;
width:100%;
height:28px;
background-color:rgb(55,55,55);
border-bottom:1px solid black;
}

次のスタイルが適用されています

div.footer{
position:fixed;
float:right;
bottom:0px;
left:87.5%;
border:1px solid:black;
border-bottom:0;
}

そしてこれを持っています

div.content{
position:absolute;
bottom:0;
top:28px;
width:100%;
background:transparent;
margin:auto;
padding:0;
}

私が抱えている問題は、コンテンツdivにあります。コンテンツdivを上部の真下から開始し、ページの残りの部分まで続けたいのですが、ページの下部を正確に何ピクセルも超えて、上部の位置も設定しました。 。現在、上部のサイズにpxを使用しているため、パーセンタイルを適用できないため、cssのみを使用してこれを行うための最良の方法は何でしょうか。

これが必要なWebサイトはhttp://www.andysinventions.info/test/で、問題は「フォーラム」というラベルの付いたタブで確認できます。

tl; dr divがページの境界を越えるのを防ぐにはどうすればよいですか？

4

3 に答える 3

1

絶対位置とトップの代わりに、margin-top：28pxを試してください：

div.content{
    bottom:0;
    width:100%;
    background:transparent;
    margin: 28px auto 0 auto;
    padding:0;
}
于 2012-04-04T19:28:36.747 に答える
0

これは、top：28pxを使用しているために発生しています。トップバーを下に移動します。代わりに、margin-top：28pxを使用する必要があります。絶対位置を取り出します。

div.content{
    width:100%;
    background:transparent;
    margin:28px auto 0 auto;
    padding:0;
}
于 2012-04-04T19:30:42.140 に答える
0

アンドリュー、

回答（ほとんどの場合正しい）とサイトを調べた後、Iframeを使用していることに気付きました。2012年、iframeはデザイン機能として過去のものとなり、オフサイトのウィジェットやフィード（またはサンドボックス）などのサードパーティの追加としてのみ使用されます。

あなたはあなたが何をしようとしているのかのためにあなたのページをこのように構成する必要があります：

<!doctype html>
<html>
  <head>
    <title>A title</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <ul id="menu">
      <!-- menu content here -->
    </ul>
    <!-- Actual page content here -->
  </body>
</html>

style.cssには次のルールがあります。

body { margin: 28px 0 0; }

ul#menu {
  position: absolute;
  top: 0;
  left: 0;
  }

これにより、最新の技術を使用して探しているものを実現できます。

于 2012-04-04T19:57:28.133 に答える