三栏的网页布局，中间内容不确定高，问怎么让两边的背景始终与内容高度一致

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>无标题文档</title>
<style
type="text/css">
#box{ width:900px;}
#left{ width:300px;
background:#699; float:left}
#center{ width:600px;background:#FC3;
float:left}
</style>
</head>

<body>
<div id="box">
    <div
id="left">111</div>
    <div
id="center">
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
     ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
    ccccccccccccc
    <br
/>
   
</div>
</div>
</body>
<script
type="text/javascript">
window.onload=function(){
  
document.getElementById("left").style.height=
document.getElementById("center").offsetHeight+‘px‘;
}

</script>
</html>

时间： 2024-10-26 09:50:16

三栏的网页布局，中间内容不确定高，问怎么让两边的背景始终与内容高度一致的相关文章

三栏的网页布局，中间宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

Web前端攻城狮培养计划之前端小白入门：网页布局基础与常见网页特效

步骤1: HTML基础超文本标记语言(英文缩写:HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言,为搭建网页结构做出第一步.本阶段主要介绍了HTML的语法基础.表格.表单.等标签,并有案例结合,达到学以致用. 第1课 HTML基础HTML是网页制作必备技能,在本课程主要介绍HTML概念.语法及常用基础标签 第2课 HTML表格表格在网页中用于数据和排版,本课程介绍表格概念.语法.操作,并通过案例掌握知识. 第3课 HTML表单表单用于收集用户信息,本课程介绍

转：CSS布局：Float布局过程与老生常谈的三栏布局

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

三栏式布局

本文来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com 地址:http://www.zhangxinxu.com/wordpress/?p=370 我熟知的三种三栏网页宽度自适应布局方法 一.前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方

转载：CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

详解 CSS 七种三栏布局技巧

作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色

负边距、三栏布局（圣杯布局、双飞翼布局）

首先来了解下 一.负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时,他原来的位置不会脱离文档流的,即还占用原来的空间,但负边距产生偏移时它原来的位置并不占用空间: 例如下面的代码 Document *{ margin: 0px; padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-

三栏布局那些事儿

中间宽度自适应,两边宽度固定的三栏布局,是前端页面开发中极为常见网站布局方式.博主认为,一名合格的前端工程师总是会将之熟记于心.以下是博主总结的五种三栏布局的常用方法,与大家分享. 正文 1.浮动布局 浮动布局是一种极易理解,也是初学者首先想到的布局方式.仅借用CSS的float属性即可轻松实现.html代码 <div class="left">Left</div> <div class="right">Right</div