有60px导航，如何让他下面内容的沾满屏幕，无滚动条

最新推荐文章于 2021-07-13 11:35:04 发布
最新推荐文章于 2021-07-13 11:35:04 发布
阅读量329 收藏
点赞数
分类专栏： html/css/css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiasohuai/article/details/81948398
版权

效果图：

<body>
  <header>
    <ul>
      <li>首页</li>
      <li>说说</li>
      <li>日志</li>
      <li>相册</li>
    </ul>
  </header>
<div id="box">
  
</div>
</body>

 

方式一：脱离文档流(这种方式是box占了全屏，存在bug,#box部门文字会被header遮住）

*{
    margin:0;
    padding: 0;
  }
  body,html{
    height: 100%;
    width: 100%
  }
  header{
      height: 60px;
      width: 100%;
      background: red;
      position:fixed;
  }
  #box{
      height: 100%;
      background: green
  }
  ul {
    list-style: none
  }
  ul li {
      height: 60px;
      width: 100px;
      float: left;
      line-height: 60px;
      text-align:center;
   }

方式二：脱离文档流

*{
    margin:0;
    padding: 0;
  }
  body,html{
    height: 100%;
    width: 100%
  }
    header{
      height: 60px;
      width: 100%;
      background: red;
      float: left;
    }
    #box{
      height: 100%;
      background: green
    }
    ul {
      list-style: none
    }
    ul li {
      height: 60px;
      width: 100px;
      float: left;
      line-height: 60px;
      text-align: center;
    }

方式三：calc(100% - 60px)  部门华为有bug

*{
    margin:0;
    padding: 0;
  }
  body,html{
    height: 100%;
    width: 100%
  }
  header{
    height: 60px;
    width: 100%;
    background: red;
  }
  #box{
    height: calc(100% - 60px);
    width: 100%;
    background: green
  }
  ul {
    list-style: none
  }
  ul li {
    height: 60px;
    width: 100px;
    float: left;
    line-height: 60px;
    text-align: center;
  }

方式四：display：flex布局（个人最喜欢的一种，很实用手机端）

*{
    margin:0;
    padding: 0;
  }
  body,html{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  header{
    height: 60px;
    width: 100%;
    background: red;
  }
  #box{
    flex:1;
    width: 100%;
    background: green
  }
  ul {
    list-style: none
  }
  ul li {
    height: 60px;
    width: 100px;
    float: left;
    line-height: 60px;
    text-align: center;
  }

 

姜无忧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css单位计算方法,CSS中的calc()计算和vw/vh长度单位
weixin_28691003的博客
08-04 2299
calc()CSS中除了使用具体的值，还可以使用calc()方法来执行一些计算。语法/* property: calc(expression) */width: calc(100% - 60px);calc()函数用一个表达式作为参数，用表达式的结果作为值。表达式的运算对象可以使用任意长度值，并且可以混用(px/em)，也可以通过小括号()来调整计算顺序。表达式中可以使用+|-|*|/操作符来操作...
css怎么设置高为100%,CSS如何设置div height 100%减去nPx
weixin_29827071的博客
08-04 886
In CSS3 you could useheight: calc(100% - 60px);Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.* {margin:0px;padding:0px;overflow:hidden}div {position:absolute}div#header {...
CSS 宽高度百分比数减去固定像素值无效的解决办法（例：100%-60px）
sea9528的博客
07-13 1135
uniapp 想设置列表栏高度不同设备自动切换，结果发现下面这样写没有效果。 //uni-app .item-list { height: calc(100vh-120rpx) ; } 查资料发现 calc（ x - y ） 减号两边要有空格才生效 //uni-app .item-list { height: calc(100vh - 120rpx) ; } ...
css calc函数
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-02 662
我最近看别人写的样式发现一个函数calc,于是我查了一下用法。 .div { height: calc(100vh - 60px);//用来动态计算div的高度 width: 100%; background: #eaebef; padding: 6px 40px; margin-top: 60px; padding-top: 30px; ...
html使用calc函数,CSS calc() 函数的介绍与使用方法
weixin_28843191的博客
06-18 5880
在HTML页面的DIV布局中，如果我们把DIV的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，CSS中的一个关于计算的函数 calc()calc() 函数介绍calc()：英文单词calculate(计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。calc() 函数...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
由于导航栏被固定，可能会遮挡住下方的内容，因此需要将下面的内容（例如列表）下移以避免被遮挡。可以通过给主体内容区域添加CSS样式来实现： ```css .list { margin-top: 60px; /* 导航栏高度 */ } ``` 导航栏...
css textarea 高度自适应,无滚动条
01-19
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class=”t_area”> 随便在这里输入内容,textarea的高度...
html中设置让div中的内容超出后自动显示滚动条
09-28
通过这种方式，当 "autoScroll" div 中的内容超出其设定的宽度或高度时，浏览器会自动显示滚动条，让用户能够查看和访问所有内容，而不会破坏整体布局。这种做法在处理大量数据或者有限空间展示内容时非常实用。 ...
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
11-21
下面我们将详细探讨如何通过CSS和JavaScript来解决这些问题，让这些元素既能自动换行，又能自适应文本内容的高度。 对于`<pre>` 元素，它的默认行为是不进行单词换行，导致当文本过长时，内容会超出容器边界而不是...
Html+CSS实现滚动条不挤占内容区宽度.zip
09-01
滚动条是当页面内容超过可视区域时出现的一种交互元素，允许用户浏览超出屏幕的部分。在 Web 开发中，滚动条的行为和样式主要通过 CSS 来控制。 在传统的 HTML 和 CSS 中，滚动条是内置于浏览器的，我们无法直接...
height:calc(100% - 10px)的用法(垂直居中) - 布局篇
热门推荐
草巾冒小子的博客
03-02 3万+
如何让一个 height:calc(100% - 10px)的用法 - 布局篇
calc()函数 css中用100%的宽度/高度，减去50px？？
最初都是小白
08-27 2万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
height：calc（100%-100px）如何兼容ie8
qq_36528523的博客
05-14 1万+
做公司后台管理系统时，右边content-main内容块高度出现了兼容问题。是content-main包裹了iframe。如何兼容ie8，贴出以下代码部分（css,js）原来css供参考另一个参考地址：https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery...
CSS3 calc() 函数，height: calc(100% - 70px)；
qq_27009517的博客
07-05 2175
今天做练习的时候遇到了这样一行代码：height: calc(100% - 70px);，100%的高度减去70px？？？这是什么函数？竟然支持不同单位之间的运算？！ 通过查阅资料，我终于认识了这个函数——calc()函数。 calc()函数是CSS3 提出的，目的是动态改变宽度/高度的变化，适配问题。 <div> <div class=“head”>标题</div> <div class=“contain”>内容</div&gt...
height calc()函数 css中用100%的宽度/高度
探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南，涵盖从基础到高级话题，旨在提升编程效率和技能。
11-05 2061
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ } 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 扩展：vh：相对于视口的高度。视口被均分为100单位的vh 注意： 运算符前后都需要保留一个空格，例如：width: ..
关于height:100%和height:100vh的区别
qq_43248623的博客
08-04 1515
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
响应式布局，height占满剩余空间，不要有滚动条
for what
04-19 2564
目录 由一道题引发的思考 问题一：为什么在 #div1 上直接 height:100%，不生效？ 问题二：为什么设置了 height : 100%，会有纵向滚动条的出现？ 由一道题引发的思考 面试中遇到的，查了后发现是挺麻烦的。今天重新做了下，整理一下遗漏的知识点： 基本样式 <div> <p>1.两个div平分灰色的空间</p> ...
如何让导航栏自适应不超出屏幕且不出现横向滚动条 写出代码
最新发布
05-04
可以使用 CSS 中的 flexbox 布局来实现导航栏自适应屏幕并且不出现横向滚动条。 HTML 代码： ``` <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值