0

現在のプロジェクトでは、CSS に関する深刻なヘルプが必要です。ページをどのように表示したいかのスクリーンショットを添付しました。私が抱えている問題は、divを互いに適切に配置することと、幅/高さをページの100％に維持することです。Javascriptを使わずにこれをやりたいです。これは私の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>

これは私のCSSです：

.wrapper{
  min-height: 100%;
  min-width: 100%;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;

    min-height: 100%;

  /* Set up proportionate scaling */
  height: auto;
  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%;
}

私がどのように見せたいかの画像（ブラウザウィンドウ全体にまたがる）： ここに画像の説明を入力

実際： ここに画像の説明を入力

4

3 に答える 3

2 
html,body {
    height: 100%;
}
.container_16 {
    min-height: 100%;
}

多分それを試してみてください。または、フィドルを作成して、コードを混乱させることができます。

編集

http://jsfiddle.net/LMFL5/4/（960が小さすぎるため、2つのモニターがあり、両方にまたがっていない限り、フィドルはそれを正しく行いません。ラッパーの幅を500のように調整して、このようにして、ラッパーにブレークポイントを簡単に設定し、セミレスポンシブサイトを作成することもできます。これはもうこの方法ではなく、フレックス幅960グリッドを使用します。

これがあなたがたくさん話していることを私がする方法です。

HTML

<body>
    <div class="container_24">
        <div class="wrapper">
            <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>
   <div class="container_16">
       <div class="wrapper">
           <form id="form1" runat="server">
            Adding some content
           </form>
       </div>
   </div>
   <div class="container_24 footer">
        <div class="wrapper">Footer</div>
   </div>
</body>

CSS

html, body {
    height:100%;
    margin: 0;
}

.wrapper{
  width: 960px;
  margin: 0 auto;      
}
.grid_16 {
    text-align: center;
}
.container_16 {
    width: 100%;
    height: 100%;
}
.container_16 .wrapper {
     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);
    height: 100%;
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    background-color: green;
    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%;
}
.container_24.footer {
    bottom: 0;
    position: fixed;
    z-index: 3;
}

私があなたの幅のためにしたことの鍵は、私がすべてのdivに含める共通の960ラッパーを作成することです。その壁はすべてのコンテンツが960スペースに存在しますが、divをフルスクリーンにまたがらせることができます。このサイト： http： //960.gs/には、あなたがやろうとしていることを正確に実行できるCSSジェネレーターがあり、コードの多くは、この同じクラスパターンからのもののように見えます。ここで、必要な数の列を生成できます：http: //grids.heroku.com/

基本的に、全画面幅のdivが必要.contentな場合は、それらのdivの1つをラップするだけで、準備は完了です。

于 2013-03-01T23:23:22.057 に答える
0

@Yecatsはあなたのためのこれ1つの助けかもしれません

 .wrapper
    {
      height: 100%;
      min-width: 100%;  
      /* Set up proportionate scaling */
      width: 100%;
      /* Set up positioning */
      position: relative;
      top: 0;
      left: 0;

    }
于 2013-03-02T11:28:12.493 に答える
0

最小高さ 100% のレイアウトについては、こちらを参照してください

于 2013-03-01T23:28:01.357 に答える