左侧固定宽,右侧自适应屏幕宽;

左右两列,等高布局;

左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)

要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了;

左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么也是不难。我个人认为这个考题关键之处就在考这里,考你如何实现等高布局;所以这一点你需要整明白如何实现;

至于第三条要求,应该来说是很方面的,我们随处都可以看到实现最小高度的代码;

第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。

上面简单的分析了一下实现过程,那么最终关键之处应该是就是“让你的代码要能同时实现两点,其一就是左边固定,右边自适应的布局;其二就是实现两列等高的布局”,如果这两个功能完成,那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现:

一、两列布局:左边固定宽度,右边自适应宽度

这样的布局,其实不是难点,我想很多同学都有实现过,那么我就在此稍微介绍两种常用的方法:

方法一:浮动布局

这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果

HTML Markup

<div id="left">Left sidebar</div>

<div id="content">Main Content</div>

CSS Code

<style type="text/css">

*{

margin: 0;

padding: 0;

}

#left {

float: left;

width: 220px;

green;

}

#content {

orange;

margin-left: 220px;/*==等于左边栏宽度==*/

}

</style>

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值,大家可以点击查看上面代码的DEMO

方法二:浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果,大家可以仔细对比一下上面那种实现方法,看看两者有什么区别:

HTML Markup

<div id="left">

Left Sidebar

</div>

<div id="content">

<div id="contentInner">

Main Content

</div>

</div>

CSS Code

*{

margin: 0;

padding: 0;

}

#left {

green;

float: left;

width: 220px;

margin-right: -100%;

}

#content {

float: left;

width: 100%;

}

#contentInner {

margin-left: 220px;/*==等于左边栏宽度值==*/

orange;

}

这种方法看上去要稍微麻烦一点,不过也是非常常见的一种方法,大家可以看看他的DEMO效果。感觉一下,和前面的DEMO有什么不同之处。

我 在这里就只展示这两种方法,大家肯定还有别的实现方法,我就不在多说了,因为我们今天要说的不是这个问题。上面完成了试题的第一种效果,那么大家就要想办 法来实现第二条要求——两列等高布局。这一点也是本次面试题至关重要的一点,如果你要是不清楚如何实现等高布局的话,我建议您先阅读本站的《八种创建等高 列布局》,里面详细介绍了八种等高布局的方法,并附有相关代码,而且我们后面的运用中也使用了其中的方法。

现在关键的两点都完成了,那么我们就需要实现第三条要求,实现最小高度的设置,这个方法很简单:

min-height: 200px;

height: auto !important;

height: 200px;

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来,我们可以交作业了,也完面了这个面试题的考试。为了让大家更能形象的了解,我在这里为大家准备了五种不同的实现方法:

方法一:

别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧。

HTML Markup

<div id="container">

<div id="wrapper">

<div id="sidebar">Left Sidebar</div>

<div id="main">Main Content</div>

</div>

</div>

CSS Code

<style type="text/css">

* {

margin: 0;

padding: 0;

}

html {

height: auto;

}

body {

margin: 0;

padding: 0;

}

#container {

background: #ffe3a6;

}

#wrapper {

display: inline-block;

border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/

position: relative;

vertical-align: bottom;

}

#sidebar {

float: left;

width: 200px;

margin-left: -200px;/*==此值等于左边栏的宽度值==*/

position: relative;

}

#main {

float: left;

}

#maing,

#sidebar{

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

查看在线DEMO。

方法二

HTML Markup

<div id="container">

<div id="left" class="aside">Left Sidebar</div>

<div id="content" class="section">Main Content</div>

</div>

CSS Code

<style type="text/css">

*{margin: 0;padding: 0;}

#container {

overflow: hidden;

}

#left {

background: #ccc;

float: left;

width: 200px;

margin-bottom: -99999px;

padding-bottom: 99999px;

}

#content {

background: #eee;

margin-left: 200px;/*==此值等于左边栏的宽度值==*/

margin-bottom: -99999px;

padding-bottom: 99999px;

}

#left,

#content {

min-height: 200px;

height: auto !important;

height: 200px;

}

</style>

查看在线的DEMO。

方法三:

HTML Markup

<div id="container">

<div id="content">Main Content</div>

<div id="sidebar">Left Sidebar</div>

</div>

CSS Code

*{margin: 0;padding: 0;}

#container{

overflow:hidden;

padding-left:220px; /* 宽度大小等与边栏宽度大小*/

}

* html #container{

height:1%; /* So IE plays nice */

}

#content{

width:100%;

border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/

margin-left:-220px;/* 宽度大小等与边栏宽度大小*/

float:right;

}

#sidebar{

width:220px;

float:right;

margin-left:-220px;/* 宽度大小等与边栏宽度大小*/

}

#content,

#sidebar {

min-height: 200px;

height: auto !important;

height: 200px;

}

查看在线DEMO效果。

方法四:

HTML Markup

<div id="container2">

<div id="container1">

<div id="col1">Left Sidebar</div>

<div id="col2">Main Content</div>

</div>

</div>

CSS Code

*{padding: 0;margin:0;}

#container2 {

float: left;

width: 100%;

background: orange;

position: relative;

overflow: hidden;

}

#container1 {

float: left;

width: 100%;

background: green;

position: relative;

left: 220px;/* 宽度大小等与边栏宽度大小*/

}

#col2 {

position: relative;

margin-right: 220px;/* 宽度大小等与边栏宽度大小*/

}

#col1 {

width: 220px;

float: left;

position: relative;

margin-left: -220px;/* 宽度大小等与边栏宽度大小*/

}

#col1,#col2 {

min-height: 200px;

height: auto !important;

height: 200px;

}

查看在线DEMO。

方法五:

HTML Markup

<div id="container1">

<div id="container">

<div id="left">Left Sidebar</div>

<div id="content">

<div id="contentInner">Main Content</div>

</div>

</div>

</div>

CSS Code

*{padding: 0;margin: 0;}

#container1 {

float: left;

width: 100%;

overflow: hidden;

position: relative;

#dbddbb;

}

#container {

orange;

width: 100%;

float: left;

position: relative;

left: 220px;/* 宽度大小等与边栏宽度大小*/

}

#left {

float: left;

margin-right: -100%;

margin-left: -220px;/* 宽度大小等与边栏宽度大小*/

width: 220px;

}

#content {

float: left;

width: 100%;

margin-left: -220px;/* 宽度大小等与边栏宽度大小*/

}

#contentInner {

margin-left: 220px;/* 宽度大小等与边栏宽度大小*/

overflow: hidden;

}

#left,

#content {

min-height: 200px;

height: auto !important;

height: 200px;

}

查看在线DEMO。

针对上面的面试题要求,我一共使用了五种不同的方法来实现,经过测试都能在各浏览器中运行,最后我有几点需要特别提出:

上面所有DEMO中,要注意其方向性的配合,并且值要统一,如果您想尝试使用自己布局需要的宽度值,请对照相关代码环节进行修改;

上面所有DEMO中,没有设置他们之间的间距,如果您想让他们之间有一定的间距,有两种方法可能实现,其一在上面的DEMO基础上修改相关参数,其二,在相应的里面加上"div"标签,并设置其“padding”值,这样更安全,不至于打破你的布局

因为我们这里有一列使用了自适应宽度,在部分浏览器下,当浏览器屏幕拉至到一定的大小时,给我们带来的感觉是自适应宽度那栏内容像是被隐藏,在你的实际项目中最好能在“body”中加上一个“min-width”的设置。

css左侧固定宽度右侧自适应的更多相关文章

  1. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  2. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

  3. css左侧固定宽度,右侧自适应的几种实现方法

    左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...

  4. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  5. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  6. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  7. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  8. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  9. HTMLCSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

随机推荐

  1. UITableView如何撤销移动操作

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道使用UITableView的委托方法canMoveRo ...

  2. scala学习笔记2(类,继承,抽象类)

    class Person{ // _ 是占位符; var name : String = _ val age : Int = 27 // private[this] 定义的内容无法外部使用,起到保护作 ...

  3. 初探linux子系统集之timer子系统(一)

    一般来说要让整个linux系统跑起来,那么一个必须的就是linux的时钟,也就是时间子系统了,这里正好工作需要,那么就研究下linux下的时间子系统了. linux内核必须完成两种主要的定时测量.一个 ...

  4. tomcat请求路由映射核心组件Mapper

    Mapper组件的核心功能是提供请求路径的路由映射,根据某个请求路径通过计算得到相应的Servlet(Wrapper).这节看下Mapper的实现细节,包括Host容器.Context容器.Wrapp ...

  5. UNIX网络编程——TCP输出,UDP输出

    TCP输出 每一个TCP套接字有一个发送缓冲区,我们可以使用SO_SNDBUF套接字选项来更改该缓冲区的大小.当某个应用进程调用write时,内核从该应用进程的缓冲区中复制所有数据到(或是应用程序的缓 ...

  6. [GitHub]第八讲:GitHub Pages

    Github Pages 是 github 公司提供的免费的静态网站托管服务,用起来方便而且功能强大,不仅没有空间限制,还可以绑定自己的域名.在 https://pages.github.com/ 首 ...

  7. 秒懂ASP.NET中的内置对象

    上篇博客,小编主要简单的介绍了一下ASP.NET中的控件,这篇博客,小编主要简单总结一下ASP.NET中的内置对象,七个内置对象分别是:Request.Response.Application.Coo ...

  8. Android进阶(二十五)setTextColor()的参数设置方式

    setTextColor()的参数设置方式 查了下资料发现setTextColor()的参数可以写成以下形式: 直接使用颜色值 setTextColor(0xFF0000FF);//0xFF0000F ...

  9. 最简单的基于FFMPEG+SDL的视频播放器 ver2 (采用SDL2.0)

    ===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...

  10. Uva - 210 - Concurrency Simulator

    自己写个双端队列,或者直接用deque,这个也比较好用 AC代码: #include <iostream> #include <cstdio> #include <cst ...