我正在为一位设计师开发一个网站,我们说,他们更倾向于印刷设计而不是网络.他们为这个网站设计的网页给了我一个不规则的内容区域.
如果这是一个手工编码的网站,我可以通过切片图像和明智地使用浮动,绝对定位和z索引来进行布局(苦心经营) – 但该网站正在Drupal中完成,我的内容区域就是这样(我想我可以在node.tpl.PHP中做一些严重的黑客攻击,但即使这样也会有问题).
这就是我的意思 – 页眉和页脚都有从其中伸出的位,这些位延伸到内容区域：
+--------------------------------------------------+ | | | logo/HEADER AREA | | | | +------------------------------------------+ | | HEAD ONE FOR PAGE | | | Lorem ipsum dolor sit amet,consectetur | | | adipiscing elit. Praesent in lectus in | +-------+ lectus tempor volutpat vitae velnunc. | | Duis diam sem,mattis in eleifend nec,vulputate | | ac dolor.Aliquam eleifend,mi non adipiscing | | condimentum,erat nunc consectetur lorem,at | | aliquet arcu purus non sapien. Sed in neque eu | | velit venenatis tincidunt vel in est. | | | | Cras fermentum magna non erat pretium suscipit. | | Proin id leo neque. Aliquam vel metus eget | | libero venenatis consectetur. Aliquam +-----+ | lobortis lacinia eros vel vulputate.Mauris | | | lorem diam,bibendum et fringilla nec ... | | +--------------------------------------------+ | | | | logo/FOOTER AREA | +--------------------------------------------------+
现在,我几乎无法解决的问题是将内容区域内容放入表中,明智地使用行和列,以避免出现粘滞区域.除了痛苦之外,它还违背了使用CMS的目的 – 每个页面中的HTML都必须手工摆弄,以使表格单元格在页面约束内正常工作.
所以 – 我想我的问题是这样的：有没有一个纯CSS(甚至CSS / Javascript)的方式来做到这一点,而不是在每个页面中诉诸脆弱,容易出错的表格编码？
(N.B.我已经告诉设计师这是一个问题,但客户已经批准了设计,至少对于这个项目,我坚持了)
解决方法
嘿!这样的解决方案怎么样？
http://jsfiddle.net/steweb/H7s2P/
你只需要拆分内容段落.顶部一个负责标题’效果’,底部一个照顾页脚’效果'(通过’浮动’和边距调整技巧):)
标记：
<div id="wrapper">
<div id="header">logo/HEADER AREA</div>
<div id="content">
<div id="piece-of-header"></div>
<p id="top">
HEAD ONE FOR PAGE <br />
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices,nulla ac tincidunt faucibus,odio arcu pellentesque lectus,sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci,eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus,eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla,vehicula sed dictum ut,dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor,enim et blandit placerat,sapien risus eleifend urna,sed posuere er
</p>
<div id="piece-of-footer"></div>
<p id="bottom">
rttitor est pharetra accumsan. Nunc porttitor,sapittitor est pharetra accumsan. Nunc porttitor,sapienus eleifend urna,sed posuere er
</p>
</div>
<div id="footer">logo/FOOTER AREA</div>
</div>
CSS：
#wrapper{
width:400px;
margin:0 auto;
}
#header,#footer{
padding:20px;
text-align:center;
background:#BEBEBE;
}
#content{
overflow:hidden
}
#content p#top{
padding-top:10px;
}
#content p#bottom{
padding-bottom:10px;
}
#piece-of-header{
width:70px;
height:70px;
float:left;
margin:0 20px 10px 0;
background:#BEBEBE;
clear:both;
}
#piece-of-footer{
margin:12px 0px 0px 10px;
width:70px;
height:70px;
float:right;
background:#BEBEBE;
}
