3

div をコーディングして、(ほぼ) 完全に表示されるようにしました。正しい div は互いの上/下にあり、ページの幅全体にまたがっています。私が見つけたのは、ページの高さ全体に広がっていないということです。どんなアドバイスでも大歓迎です！また、水平スクロール バーをなくしたいと思っています。:)

CSS:

body {
  color: #333;
  font-size: 11px;
    font-family: "Myriad Pro", Arial, Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
  position: relative;
}

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  margin-top:0px;
  padding-top:0px;
      min-height:800px; 
    background-image:url(../images/Content_bkg.gif);
        box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}

HTML:

<body>
       <div class="container_24">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
       </div>
       <div class="container_16">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Body" runat="server">

                </asp:ContentPlaceHolder>
            </form>
       </div>
       <div class="container_24"></div>

</body>

更新: これは、以下に示すラッパーの概念で私のコードがどのように見えるかです。

.wrapper{
    height:100%;
}

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  margin-top:0px;
  padding-top:0px;
    background-image:url(../images/Content_bkg.gif);
        box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}

HTML:

<body>
    <div class="wrapper">
       <div class="container_24">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
       </div>
       <div class="container_16">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Body" runat="server">

                </asp:ContentPlaceHolder>
            </form>
       </div>
       <div class="container_24"></div>
        </div>
</body>

スクリーンショット:

ここに画像の説明を入力

4

3 に答える 3

2

各コンテナに明示的に指定した場合、（視覚的に）完全な高さを持つ唯一の方法は、または類似heightのラッパーですべてを囲むことですheight: 100%

編集:説明の例:

<body>
  <div id="wrapper">
     <!--Your stuff here-->
  </div>
</body>

上記の例では、ラッパーはコンテンツではなく 100% の高さを取得します。

于 2013-02-28T19:12:05.053 に答える
0

ページの高さと幅を正確に決定したいと思います。以前にも似たような質問をしたことがあります。ご覧ください: Opera 12 でページ幅を見つける方法 (デスクトップ Windows 用)?

私は同じようにRnDを行い、結果を出しました

于 2013-02-28T19:34:33.930 に答える
0

ページの高さを取得するには、javascript を使用することをお勧めします。次に、コンテナーごとに計算を行って、コンテナーと高さの正しい比率を取得し、ページを埋めます。

于 2013-02-28T19:12:57.450 に答える