我如何...响应布局：对于较小的窗口 - 顶部的右列 [英] How do I...Responsive Layout : for smaller window- Right column at the top
本文介绍了我如何...响应布局：对于较小的窗口 - 顶部的右列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
要求是当窗口大小减小（响应设计小于800px）时，右列（div）需要位于顶部，然后是中间列和左下方列。
这几乎正常。
我面临的问题是：
对于较小的窗口，Scroll出现在浏览器的底部。
但是我们希望卷轴只适用于中间（红色）区域。
我们怎样才能实现这个目标。
Html和Css在底部给出。
< html xmlns = http://www.w3.org/1999/ xhtml >
< head runat = server < span class =code-keyword>>
< title > < / title >
< style < span class =code-attribute> type = text / css >
.left {width：20％; float：left}
.midle {width：60％; float：left}
.right {width：20％; float：left}
@media（max-width：800px）{
#tbl {display：table;宽度：100％;边框：0像素; margin：0px}
#Header {display：table-header-group; }
#footer {display：table-footer-group; }
#tblBody {display：table-row-group; }
.left {width：100％; float：none！important}
.midle {width：100％; float：none！important}
.right {width：100％; float：none！important}
}
< / style >
< / head >
< body style = < span class =code-keyword> border：0px; margin：0px >
< 表格 id = form1 runat = server >
< div id = tbl 样式 = width：100％ >
< div class = left id = 页脚 style = background-color：黄色;溢出：隐藏 > 左< / div >
< div class = midle id = tblBody style = background-color：Red;溢出：自动 > 中间
< div style = width：1200px >
Abc12 ------------------------------------------ --Abc3 -------------------------------------------- Abc4-- ------------------------------------------ Abc5
< / div >
< span class =code-keyword>< / div >
< div class = right id = 标题 样式 = background-color：绿色;溢出：隐藏 > 右 - < / div >
< / div >
< / form >
< / body >
< / html >
解决方案
The requirement is when window size reduces (in.responsive design less than 800px) the right column(div) need to come at the top, then middle column and at the bottom left column.
This is almost working.
The Problem I am facing is:
for smaller window the Scroll is appearing at the bottom of browser.
But we want the scroll should only be for the middle(red) area.
How can we achive this.
Html and Css are given at the bottom.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.left{width:20%; float:left}
.midle{width:60%; float:left}
.right{width:20%; float:left}
@media (max-width: 800px) {
#tbl {display: table; width:100%; border:0px; margin:0px }
#Header {display: table-header-group; }
#footer {display: table-footer-group; }
#tblBody {display: table-row-group; }
.left{width:100%; float:none!important}
.midle{width:100%; float:none!important}
.right{width:100%; float:none!important}
}
</style>
</head>
<body style="border:0px; margin:0px" >
<form id="form1" runat="server">
<div id="tbl" style="width:100%">
<div class="left" id="footer" style=" background-color:Yellow; overflow:hidden">Left</div>
<div class="midle" id="tblBody" style="background-color:Red; overflow:auto" >Middle
<div style="width:1200px">
Abc12--------------------------------------------Abc3--------------------------------------------Abc4--------------------------------------------Abc5
</div>
</div>
<div class="right" id="Header" style="background-color:Green; overflow:hidden">Right-</div>
</div>
</form>
</body>
</html> 解决方案
这篇关于我如何...响应布局：对于较小的窗口 - 顶部的右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
