Html Div布局问题-无法使页眉随页面放大/缩小
我目前正在设计一个简单的web应用程序,供各种用户使用,屏幕大小为1024x768到1600x1200 这就是我迄今为止所取得的成就: 不幸的是,页面的顶部部分似乎溢出到正文中。你知道我该怎么解决这个问题吗 这是我的密码: CSSHtml Div布局问题-无法使页眉随页面放大/缩小,html,css,Html,Css,我目前正在设计一个简单的web应用程序,供各种用户使用,屏幕大小为1024x768到1600x1200 这就是我迄今为止所取得的成就: 不幸的是,页面的顶部部分似乎溢出到正文中。你知道我该怎么解决这个问题吗 这是我的密码: CSS #header { width: 100%; height: 20%; min-height: 20%; max-height: 20%; position: fixed; border-bottom: 1px soli
#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>
虚拟创意墙
请给你的想法一个标题
请详细说明你的想法
您只需删除或调整
标记上的默认边距即可
p { margin:0; }
要真正成为动态的,您需要从标题中删除所有高度属性:
#header {
width: 100%;
position: fixed;
border-bottom: 1px solid #e8e8e8;
}
您应该看看(RWD)并使用/修改一些现有的解决方案,如,或(列出一些更知名的解决方案) 在css中尝试此操作,但必须限制header 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%;
}
更新的如果您的标题试图包含两个文本框(看起来是这样的),那么它不够大。由于没有为标头指定
溢出
,因此它只是将其溢出到主区域中
解决此问题的一种方法是增加标头的大小,或者在标头太小时为其指定溢出
这里有一个更新的提琴,您希望标题溢出:隐藏
请理解,您从未告诉CSS如果标题中有太多内容,该如何处理标题。因此它违约了。如果希望文本框成为main的一部分,可能会意外地将其放置在标题中 你能更清楚你的问题吗?我看没什么不对劲。也许是一个屏幕截图,它在你的浏览器中是什么样子的。你说它溢出到体内是什么意思?如果您谈论的是换行,您可以使用
溢出:隐藏使其不换行并隐藏,或者使用溢出:滚动使其滚动。但是,它们可能只有在指定max height
属性时才起作用;文本框之间有一条细细的灰线。请更具体一点。除了减少标题和内容之间的间距外,这有什么不同?它不会将标题内容扩展到其容器之外。如果看不到标题的下边框。。。校准你的显示器。