0

私は現在、1024x768 から 1600x1200 モニターの画面サイズを持つさまざまなユーザーが使用する単純な Web アプリを設計しています。

これは私がこれまでに達成したことです: http://jsfiddle.net/AdyQ5/

残念ながら、ページの上部が本文にオーバーフローしているようです。これを修正する方法について何か考えはありますか?

これが私のコードです：

CSS

#header {
    width: 100%;
    height: 20%;
    min-height: 20%;
    max-height: 20%;
    position: fixed;
    border-bottom: 1px solid #e8e8e8;
}
#main {
    width: 100%;
    height: 80%;
    min-height: 80%;
    max-height: 80%;
    position: fixed;
    overflow-y: scroll;
    overflow-x: none;
    top: 20%;
}
#text_header {
    font-size: 1em;
    font-weight: bold;
}
body {
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
#title, #message {
    width: 95%;
}
.container {
    padding: 10px;
}
label {
    font-size: 0.8em;
}

HTML

<div id="header">
  <div class="container"> 
  <span id="text_header">Virtual Idea Wall</span> 
    <p>
        <label for="title">Please give your idea a title</label>
        <br />
        <input type="text" id="title" name="title"/>
    </p>
    <p>
        <label for="message">Please provide details of your idea</label>
        <br>
        <input type="text" id="message" name="message"/>
    </p>
    <p>
        <input type="submit" id="sendmessage">
    </p>
    </input>
  </div>
</div>

<div id="main">
  <div class="container">
    <div id="chat"></div>
  </div>
</div>
4

4 に答える 4

2

タグのデフォルトの余白を削除または調整するだけです<p>。

p { margin:0; }

更新されたフィドル

本当に動的にするには、ヘッダーからすべての高さ属性を削除する必要があります。

#header {
    width: 100%;
    position: fixed;
    border-bottom: 1px solid #e8e8e8;
}

追加のデモ

于 2013-07-23T21:11:17.777 に答える
0

CSS でこれを試してみてください。ただし、ヘッダー div のコンテンツを制限する必要があります。

#header {
width: 100%;
height: 20%;
position: fixed;
border-bottom: 1px solid #e8e8e8;
top: 0px;
overflow: hidden;
}
#main {
width: 100%;
height: 80%;
position: fixed;
overflow-y: scroll;
overflow-x: none;
top: 20%;
}

更新されたフィドル

于 2013-07-23T21:17:49.790 に答える
0

ヘッダーが 2 つのテキスト ボックスを含めようとしている場合は、そのように見えますが、十分な大きさではありません。ヘッダーに を指定しなかったoverflowため、ヘッダーをメイン領域にオーバーフローさせるだけです。

これを修正する方法は、ヘッダーのサイズを大きくするか、ヘッダーが小さすぎる場合にオーバーフローを指定することです。

ヘッダーが必要な場合に備えて、更新された Fiddle を次に示します。overflow:hidden

更新されたフィドル

ヘッダー内に多くの情報が含まれている場合にヘッダーをどう処理するかを CSS に伝えていないことを理解しておいてください。それでデフォルトした。テキスト ボックスをメインの一部にしたい場合、誤ってヘッダー内に配置してしまった可能性があります。

于 2013-07-23T21:30:41.500 に答える