网页布局:左边为导航，右边正文,左边和右边的高度总是相等,或者导航最低高度为屏幕高度...

现在很多网页的布局是左边是导航，右边是正文，这样看起来简单、大方，我们公司的网站就是这样设计的，有两种错误的布局如下：

图一和图二两种都是错误的情况，图一没有给左边导航设置高度，图二给左边设置了高度为屏幕的高度，当出现滚动条的时候，显示的也很丑。

正确的情况应该是，左边和右边的高度总是相等

代码如下：

<div class="container"><div class="left"><div>1导航</div><div>2导航</div><div>3导航</div><div>4导航</div></div><div class="right"><div>sss</div><div>test</div><div>test</div><div>test</div></div>
</div>
<style>body {margin: 0;padding: 0;text-align: center;}.container {overflow: hidden;}.left {width: 20%;float: left;background-color: #e2e2e2;min-height: 100%;margin-bottom: -99999px;padding: 0 0 99999px;}.left div {border-bottom: 1px solid #ccc;color: #6f6f6f;display: block;padding: 20px 2px;text-decoration: none;}.right {width: 80%;float: left;}.right div {height: 100px;background-color: #ddd;}
</style>

或者需要左边导航高度最少为屏幕的高度，只要给导航设置最小高度为100%，前提是它父亲的高度为100%；

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div class="container"><div class="left"><div>1导航</div><div>2导航</div><div>3导航</div><div>4导航</div></div><div class="right"><div>sss</div><div>test</div><div>test</div><div>test</div></div><div></div>
</div>
</body>
<style>html, body {margin: 0;padding: 0;text-align: center;height: 100%;}.container {overflow: hidden;height: 100%;}.left {width: 20%;float: left;background-color: #e2e2e2;min-height: 100%;margin-bottom: -99999px;padding: 0 0 99999px;}.left div {border-bottom: 1px solid #ccc;color: #6f6f6f;display: block;padding: 20px 2px;text-decoration: none;}.right {width: 80%;float: left;}.right div {height: 100px;background-color: #ddd;}
</style>
</html>

转载于:https://www.cnblogs.com/mianbaodaxia/p/6256871.html

网页布局:左边为导航，右边正文,左边和右边的高度总是相等,或者导航最低高度为屏幕高度...相关推荐

css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
计数原理，递推，求从左边能看到l个棒子，右边能看到r个棒子的方案数目
题意有高为 1, 2, -, n 的 n 根杆子排成一排, 从左向右能看到 L 根, 从右向左能看到 R 根.求有多少种可能的排列方式. solution: 数据范围仅200,本来是往组合数学方面想 ...
窗体分为左右两部分，要求在左边栏点击按钮时，右边动态加载窗体
http://smartsoft.5d6d.com/thread-7420-1-1.html 今天在做项目时候遇到一个问题,窗体分为左右两部分,要求在左边栏点击按钮时,右边动态加载窗体最后想到用pa ...
笔试：求数组左边减去右边的最大值 / 右边减去左边的最大值
求数组左边减去右边最大值 / 右边减去左边最大值是笔试和面试中很容易考的一个动态规划问题,我的一个同学面试的时候就考了求数组左边减去右边最大值一题 . 先考虑一下右边减去左边最大值 ,为什么呢 ...
解决word分栏左边未填充满就换到右边去
解决word分栏左边未填充满就换到右边这种情况一般是由于文中有分隔符导致的,只需要找到分割符,删除即可. 点击word开始,如下图标红部分点击之后出现段落选项然后出现word选项,选择显示选项,勾 ...
李洪强和你一起学习前端之(8)浮动,网页布局,定位
2.1标准流(文档流) 块级元素独占一行显示,标准流的显示方式让两个盒子在一行显示 <!DOCTYPE html> <html> <head> <meta ...
html的浮动跟标准流,网页布局的标准流浮动流与定位流
一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad 等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元 ...
python学习 day49之CSS网页布局
CSS网页布局一网页布局方式二标准流三浮动流什么是脱离文档流? 浮动元素脱标文档流意味着注意点: 让两个元素显示到一行的两种实现方式方式一:修改显示方式为inline-block ...
054.CSS网页布局
文章目录一.网页布局方式二.标准流三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...

网页布局:左边为导航，右边正文,左边和右边的高度总是相等,或者导航最低高度为屏幕高度...

网页布局:左边为导航，右边正文,左边和右边的高度总是相等,或者导航最低高度为屏幕高度...相关推荐

最新文章

热门文章