0

我目前正在设计一个简单的 Web 应用程序，供屏幕尺寸为 1024x768 到 1600x1200 显示器的各种用户使用。

这是我到目前为止所完成的：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

你应该看看响应式网页设计(RWD) 并使用/修改一些现有的解决方案，如Bootstrap、Gumby或Foundation（举一些更知名的）。

于 2013-07-23T21:15:32.457 回答
0

如果您的标题试图包含两个文本框，看起来就是这样，它还不够大。由于您没有overflow为标题指定一个，它只是将它溢出到主区域。

解决此问题的一种方法是增加标头的大小，或者为标头指定溢出以防它太小。

这是一个更新的小提琴，如果你想要标题overflow:hidden

更新小提琴

请理解，如果标题内容太多，您从未告诉 CSS 如何处理标题。所以它默认了。如果您希望文本框成为主文本框的一部分，您可能不小心将它们放在标题中。

于 2013-07-23T21:30:41.500 回答