开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让两个div填充<body>页面宽度

要让两个div填充<body>页面宽度，可以使用CSS中的flexbox布局或者grid布局来实现。

使用flexbox布局：
- 在<body>标签中添加一个父容器div，并设置其样式为：display: flex;。
- 在父容器div中添加两个子div，分别表示两个需要填充宽度的div。
- 设置子div的样式为：flex-grow: 1;，这样两个子div会平分父容器div的宽度。

示例代码：

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    display: flex;
  }
  .div1, .div2 {
    flex-grow: 1;
  }
</style>

<body>
  <div class="container">
    <div class="div1">Content 1</div>
    <div class="div2">Content 2</div>
  </div>
</body>

使用grid布局：
- 在<body>标签中添加一个父容器div，并设置其样式为：display: grid;。
- 在父容器div中添加两个子div，分别表示两个需要填充宽度的div。
- 设置父容器div的样式为：grid-template-columns: 1fr 1fr;，这样两个子div会平分父容器div的宽度。

示例代码：

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>

<body>
  <div class="container">
    <div>Content 1</div>
    <div>Content 2</div>
  </div>
</body>

以上两种方法都可以让两个div填充<body>页面宽度，并且适用于各种场景和需求。腾讯云提供的相关产品和产品介绍链接地址可以参考腾讯云官方文档或者咨询腾讯云的客服人员获取。

相关搜索:如何让div占据整个宽度？是否让子ul均匀填充父div的100%宽度？如何让图片忽略父div填充？如何让constraintView填充scrollView中的宽度空间？如何使用CSS让背景填充整个div js 如何让div在页面中间如何让div占据父元素的全部宽度？如何让浮动DIV填充其父DIV中的可用空间？如何让div用边距填充视区？如何让图像在悬停时填充整个div？如何让两个div内联反应如何让文本溢出设置宽度div而不下拉？如何让三个元素填充一个div，其中center元素具有动态宽度？如何让两个div取较大div的高度如何让第二个div行忽略父div的宽度如何让两个div标记水平对齐？如何让div跨越两个div，同时允许增加内容在使用.grid()时如何让tk.Button()填充窗口宽度？如何让两个div并排在内部div弹出？如何在iText 7中用字符填充页面宽度

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。

02

JS实现瀑布流页面布局

每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。

04

css经典布局——圣杯布局

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

01

从零开始学 Web 之移动Web（七）Bootstrap

随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。

03

网页滚动条占用网页宽度导致网页抖动问题

最近使用bootstrap构建布局时，我发现不同页面container的x轴起始位置有些许不同，大概有几像素的变动，后来经过一个小时的排查发现不是代码书写问题，而是页面的滚动条也占用网页宽度，所以有滚动条的页面和没有滚动条的页面body的宽度是不一致的。

02

p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布

学习本文前你需要具备一点 p5.js 的知识，想了解的请查看《p5.js 光速入门》。

04

Rem布局的原理解析

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。

02

text-align属性对position:absloute/fixed的元素无效

text-align属性对position:absloute/fixed的元素无效

02

教你实现一个悬浮可拖动并在滑动页面时会自动收缩的vue侧边组件按钮

实现一个悬浮可拖动且可自定义的一个侧边按钮，在实际的业务开发中可以根据业务需要进行调整

04

vue移动端开发总结

相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。

04

CSS实现多列复杂界面布局

最近做一个云客服项目，可以把多个微信号消息集中到一个客服平台中，方便统一管理，这里就不详细说客服平台的功能。做为码农，工作职责就是把功能实现了，在此，我简单说一下页面布局吧。先贴上设计稿吧： UI

vue移动端开发总结

相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。

03

vivo 悟空活动中台 - 栅格布局方案

今天来给大家分享一下栅格布局方案。在后台展示页面中，常见卡片列表的展示需求。但是这类展示型需求其实不容易满足，有以下两个问题。

04

CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

01

rem适配布局

rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。

03

css属性及定位操作

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

05

通过 JS 判断页面是否有滚动条的简单方法

前言最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的

09

【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。

01

魔改笔记五：从头开始，手搓一个关于页面

关于页面，就相当于一个站点的门户，只有这里才能让访客了解站长，原本的关于页面丑的简直没法看，干巴巴的文字，一点动效都没有，上网查找了一些相关教程，但是都没有满意的，要么就是太复杂，要么就是太花哨，不是说不好看，而是不适合我的站点。而现在，虽然不能说精通，但是好歹也算学过一点点魔改知识了，那么我们就尝试着自己搞搞，看看能不能整一个心仪的出来吧！

01

前端学习笔记之CSS知识汇总 CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

03

第124天：移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

04

CSS几个竖直与水平居中盒子模型

1、利用绝对定位，一个居中的模型 #login { /* 定义一个ID选择器 */ width:300px; /* 定义盒子宽度为300px */ height:200px; /* 定义盒子高度为200px */ position:absolute; /* 使用绝对位置进行定位 */ left:50%; /* 左部盒子开始位置是页面宽度的50% *

08

CSS几个竖直与水平居中盒子模型

水平居中：text-align: center; 竖直居中：line-height: 30px（30为层高）

08

CSS几个竖直与水平居中盒子模型

1、利用绝对定位，一个居中的模型 #login { /* 定义一个ID选择器 */ width:300px; /* 定义盒子宽度为300px */ height:200px; /* 定义盒子高度为200px */ position:absolute; /* 使用绝对位置进行定位 */ left:50%; /* 左部盒子开始位置是页面宽度的50% */

02

移动端流式布局

width=device-width //设置页面宽度等于设备物理宽度

02

Vue.js开发移动端经验总结

相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。

01

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。如何让自己的网站也响应式Web设计，可以响应设备的分辨率呢? 根据Ethan Ma

07

YUI3 CSS框架学习

改变最大的我觉得是Grids部分，YUI2中以模版的方式提供给我们调用，功能中多选项也很多，而且配合Grid Build Tool，可以快速的生成复杂的页面结构。但正因为其复杂，所以在一些需要自定义比较多的场景下使用起来就比较痛苦。YUI3一改以往的复杂性，仅仅是提供简单的页面逻辑结构单元，我们可以自由的定义页面的宽度，结构单元的分布。非常简单。当然，目前还处于Beta阶段，不知道后续会不会变的越来越强大。

03

手机端页面自适应布局---rem

如果页面的宽度超过了640px，那么页面中html的font-size恒为100px。否则，页面中html的font-size大小为：100*（当前页面宽度 / 640）。

05

移动web开发(2)

比如说,我们想要一个盒子里面放两个小盒子,那我们就采取流失布局,主要是宽度要采取百分比的形式.

01

css(2)

font-family可以将多个字体名保存起来，如果浏览器不支持第一个字体会依次尝试后面的字体。

02

跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程[通俗易懂]

通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。

02

前端之CSS内容

一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法 1

视频智能分析平台EasyCVR衍生版视频管理平台菜单栏小屏自适应优化

在目前TSINGSEE青犀视频开发的众多视频平台中，EasyCVR可以说是一个完善的平台，即便于市面其他平台进行对比，EasyCVR也算得上是在走在前列的平台。

02

响应式设计布局要不要了解一下？

我们正在跑步进入移动互联网时代，所以针对移动环境下web开发响应式设计成为发展的一个必然的趋势。所以这几天一直没更新文章，也是在准备怎么写关于这个响应式设计，毕竟用可以，但是想写的明白还是需要费点功夫的，有人说不会响应式布局不算一个合格的前端，也有人说响应式是css的高阶玩法，不管怎么说，我们还是要写一个教程的，今天我简单的解释一下什么是响应式布局设计，目前写的是怎么可以实现，和一些原则，然后具体的后期我会持续更新。正好也写一些有含金量的文章，之前写的文章太浅了，没什么技术含量，以后尽量不写太浅的东西，略略略，向着大神大步迈去...

03

谈响应式web设计代码实现

01

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

【前端攻略--HTML/CSS】媒体查询

1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。

01

css多浏览常见问题

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是. 以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ wid

03

CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。

01

React Hook案例集锦

React Hook本质就是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 hook，结果一般会有返回值，使用hook的目的一般是抽离多个组件的公共逻辑，本文以6个案例来带大家熟悉React Hook的使用。

00

HTML编码规范建议

解释：对于非 HTML 标签之间的缩进，比如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。示例：

03

前端入门学习--CSS

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

02

CSS侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应

一个页面，左栏是内容栏content，右栏是侧边栏sidebar。如何使侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应呢？为了保证内容区宽度自适应，先不设定其宽度，使其填充整个DIV区域，设定足够大小的右外边距，左浮动。侧边栏使用负margin，设置一定的负值左外边距，使其浮动到实现设定好的空白右外边距的地方。 <style> div#wrapper { margin:15px 0; overflow:auto; } div#content { float:left; margin-right:465p

05

CSS 零基础到实战（05）布局、盒子模型、弹性盒子【前端就业课第二阶段】

流动布局有3种布局模型，分别是流动布局（常规默认时）、定位布局（relative）以及浮动布局，其中所述的流动布局、定位布局已在第一点讲解，接下来咱们查看浮动布局。

02

不要再用js设置rem了，现代css自适应方案来了

在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化

04

H5页面适配及微信默认字号问题的最佳实践

移动端适配最简单的是通过js动态计算 viewport 的缩放值，但过于粗暴，会导致页面图片文字失真模糊。目前，移动端页面一般使用 rem 或 vw / vh 开发会较为方便，下面以 rem 为例：

css写作建议和性能优化小结

还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！

02

CSS入门指南-4：页面布局

display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭