pc端页面body需设置min-width

最新推荐文章于 2022-04-10 18:44:29 发布
原创 最新推荐文章于 2022-04-10 18:44:29 发布 · 8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #学习心得 #网页制作

本文探讨了浏览器窗口缩小时导致网页布局异常的原因，并提出了通过设置body最小宽度来解决此问题的方法。

浏览器窗口最大时，效果正常；



浏览器窗口缩小时，效果异常。


  这是因为header和nav的背景色不是版心容器container的宽度，而是body的宽度，body的宽度是浏览器窗口的宽度，所以当浏览器窗口变小时，background-color的宽度也跟着缩小，所以需要给body设置最小宽度min-width，一般为ui设计图时的宽度。


7个场景让你深入理解min max - width height
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-24 1万+
theme: channing-cyan 这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战 创作不易，点个赞再看呗! 关注专栏 - 学透CSS，让你走进CSS世界的深处 前言 日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/ma.
页面布局设计与PC端后台界面实战
weixin_39218464的博客
06-16 996
前端页面布局初探
body min-width 防止页面被过度压缩
qq_45059900的博客
10-27 893
在打开控制台，或控制页面宽度等操作，很容易导致页面dom被压缩，从而导致dom元素被换行这样不符合预期的显示，可以通过 //全局css样式 html body $app{ height: 100%; margin: 0; padding: 0; min-width: 1300px; } //min-width设置页面最小宽度，当小于最小宽度（1300px）时，超出部分不再显示 ...
html对body设置了minwidth,css给body设置min-height为什么没有作用？
weixin_39676972的博客
06-26 426
当网页内容区content东西很少时，footer就会跑到上边来？我给body,html设min-height:100%;没有作用，设置height：100%；就好了，但是内容多了就在一屏下？body,html{ min-height:100%;}body{ position:relative;}.content{ podding-bottom:100px;}.footer{positi...
PC端页面宽度自适应
weixin_43263240的博客
02-19 2786
想元素自动适应屏幕的宽度方法： 方法一：设置witdth:100%; 方法二：如果是块元素的话，不设置宽度，也有同样效果，（块元素解释：默认独占父级的一行,不能够与其他元素处于同一行 宽高设置生效 外边距设置生效） 举例代码 <!doctype html> <html> <head> <meta charset="utf-8" /> &lt...
控制body的最小宽度
Chainse的专栏
12-18 1896
有时候；网页在屏幕或者浏览器缩小的情况下，布局会跑乱，为了解决这问题我们可以设置body的最新宽度， 代码如下 body{ background:#FCCFCFC; min-width: 1220px; _width: expression(document.documentElement.clientHeight > 1220 ? "1220px" : ""); ...
html中body的width是什么,html - Body min-width issue - Stack Overflow
weixin_29997657的博客
06-10 268
I am currently experimenting locally with Vantage theme(Wordpress)LinkI want to set minimum width of the page in order to stop scaling down content when browser window is being narrowed.It works perfe...
pc项目不使用自适应布局方案，而是用max-width设置最大和最小宽度即可，但是该分别设置多少？在哪个元素进行设置呢？标准是什么
06-11
具体数值标准需分场景：-主内容区：max-width:1200px（参考B端系统如阿里云控制台）-导航菜单：min-width:200px（确保文字不折行）-表格：min-width必须大于列宽总和（特殊场景可配合overflow）安全边界设置要考虑...
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="weaver.general.Util"%> <%@page import="weaver.conn.RecordSet"%> <%@page import="com.alibaba.fastjson.JSONObject"%> <%@page import="com.alibaba.fastjson.JSONArray"%> <%@page import="com.gushine.utils.InforHttpsUtil"%> <%@page import="java.util.HashMap"%> <% String pddh = request.getParameter("PDDH"); String sql = "select zcmc,zcbm,zcqc,zcgz,zclz,zcfl,ppxh,syr,rkrq,pdbz,zczt,pdsj from uf_CKBGQD where pddh= "+pddh; JSONObject json1 = new JSONObject(); JSONArray jsonArray = new JSONArray(); RecordSet rs = new RecordSet(); rs.execute(sql); int count = 0; while(rs.next()){ json1.put("zcmc",rs.getString("zcmc")); json1.put("zcbm",rs.getString("zcbm")); json1.put("zcqc",rs.getString("zcqc")); json1.put("zcgz",rs.getString("zcgz")); json1.put("zclz",rs.getString("zclz")); json1.put("zcfl",rs.getString("zcfl")); json1.put("ppxh",rs.getString("ppxh")); json1.put("syr",rs.getString("syr")); json1.put("rkrq",rs.getString("rkrq")); json1.put("pdbz",rs.getString("pdbz")); json1.put("zczt",rs.getString("zczt")); json1.put("pdsj",rs.getString("pdsj")); jsonArray.add(json1); } %> <!DOCTYPE html> <html> <head> <title>查看报告</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <!-- React 组件库样式 --> <link rel="stylesheet" href="/cloudstore/resource/pc/com/v1/index.min.css?v=1715806801819"> <link rel="stylesheet" href="/cloudstore/resource/pc/com/v1/ecCom.min.css?v=1715806801819"> <!-- import JS --> <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js" charset="gb2312"></script> <script type="text/javascript" src="/js/jquery/jquery-3.7.1.min.js"></script> </head> <body style="width:100%; height:100%;"> <div id = "container"> <div class="coms-mode-docker coms-mode-search"> <div id="cube_search_9"> <div class="ant-spin-nested-loading"> <div class="ant-spin-container"> <div style="height: 100%;"> <div class="wea-new-top-content" style="height: 691.175px; overflow-y: hidden;"> <div class="cube-list-wrapper"> <div> <div class="wea-new-table cube-list-table pageAutoWrap"> <div style="width: 100%; height: 100%;"> <div style="width: 100%;"> <div style="width: 100%;"> <div class="cube-list-table clearfix"> <div class="ant-spin-nested-loading"> <div class="ant-spin-container"> <div class="ant-table ant-table-large ant-table-empty ant-table-fixed-header ant-table-scroll-position-left"> <div class="ant-table-content" style="padding-left: 0px; padding-right: 0px;"> <div class="ant-table-scroll"> <span> <div class="ant-table-header" style="overflow-x: scroll; margin-bottom: 0px !important; padding-bottom: 0px !important;"> <table class="ant-table-fixed" style="width: 100%;"> <colgroup> <col style="width: 20%; min-width: 20%;"> <col style="width: 8%; min-width: 5%;"> <col style="width: 7%; min-width: 5%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> </colgroup> <thead class="ant-table-thead"> <tr style="height: 41.6px;"> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产编码</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产名称</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产全称</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产类属</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产归属</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产分类</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">品牌/型号</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">使用人</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">入库日期</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">盘点备注</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产状态</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">盘点时间</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">操作</span><span class="react-resizable-handle react-resizable-handle-se"></span></th> </tr> </thead> </table></div> <div class="ant-table-body" style="overflow: auto scroll; max-height: 600px; min-height: auto;"> <table class="ant-table-fixed" style="width: 100%;"> <colgroup> <col style="width: 20%; min-width: 20%;"> <col style="width: 8%; min-width: 5%;"> <col style="width: 7%; min-width: 5%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> <col style="width: 6%; min-width: 6%;"> <col style="width: 7%; min-width: 6%;"> </colgroup> <tbody class="ant-table-tbody"> <% if(jsonArray.size()>0){ for(int i=0;i<jsonArray.size();i++){ %> <tr class="ant-table-row ant-table-row-level-0"> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zcbm")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zcmc")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zcqc")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zclz")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zcgs")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zcfl")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("ppxh")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("syr")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("rkrq")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("pdbz")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("zczt")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.get(i).getString("pdsj")%></span></td> <td class="react-resizable"><span class="wea-url">"操作"</span></td> </tr> <% } } %> </tbody></table></div> </span> </div></div> </div></div></div></div></div></div> </div></div></div></div><div></div><div></div></div> </div> </div> </div> </div> </div> </div> </body> </html>帮我实现导出数据和物料编码、使用人、使用部门查询，点击删除按钮把点击行的资产编码传给前端
最新发布
10-24
- 在前端，提供一个导出按钮，点击后触发一个请求（可以是表单提交或AJAX）到服务器端的一个Servlet或JSP页面，该Servlet/JSP生成Excel文件并返回给浏览器。 - 使用Apache POI库在服务器端生成Excel文件。 步骤：...
pc端媒体查询屏幕设置
09-24
在PC端网页设计中，媒体查询（Media Queries）是一种CSS3技术，用于根据设备的特性（如视口宽度、高度、分辨率等）应用不同的CSS样式。对于屏幕设置，你可以通过媒体查询来针对不同尺寸的显示器定制布局和样式： ...
min-width作用
伟伟's blog
10-12 2054
min-width作用效果： eg： 内容 如果内容的实际宽度 如果内容的实际宽度>设置的min-width值，内容的宽度会被压缩成min-width值
html中设置body最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...
weixin_27743991的博客
05-31 2574
这里以vue-cli初始化的项目为例：1. body,htmlhtml,body {height: 100%;width: 100%;}2. App.vue中#app {height: 100%;width: 100%;}3. Home.vue组件title.home {min-width: 1024px; // 设置的最小宽度，小于1024时，会出现滚动条min-height: 100%;bac...
min-width与max-width搭配使用写PC端
tao__f的博客
11-28 610
html,body{ width: 100%; max-width: 1920px; min-width: 1423px; margin: 0 auto; }
web排版——实现：body全屏（width:100%;height:100%），分left与right两栏，left宽度为固定值（如200px），right宽度为全屏剩下的宽度...
weixin_30877493的博客
11-04 107
<!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 htt...
PC端宽度、高度的自适应
weixin_46579411的博客
03-31 1779
PC端宽度、高度的自适应： 有时候我们希望，写html结构的宽和高，能适应不同的分辨率、不同的设备、不同的内容增删，使我们项目更加的灵活。 一：宽度自适应 默认情况下块状元素： 当width不设置的时候，或者width:100%;当前元素的宽跟随父元素的宽变化。 二、高度自适应的第一种情况： 当元素height不去设置或者是设置成height:auto;（默认值） 元素的高度是被内容撑开的。 这个...
Web 页面的高、宽和坐标
polk6的专栏
08-23 4891
本文展现3个区域的高、宽或坐标： ①页面body区域的height和width ②滚动条Scroll相关的高度 ③鼠标的坐标 展示图: height、width以及坐标都有client*和offset*之分。 这又涉及到IE浏览器和Chrome浏览器的差异性。 //compatMode是关于MS IE的渲染,CSS1Compat 为标准兼容模式
设置了body的最大宽度，但是为什么body的背景颜色还铺满整个页面？
m0_61547956的博客
04-10 1229
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是整个页面的的。一旦html标签含有背景色，则body的背景色变成了正常的body标签的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为整个页面的背景色。 body { min-width: 320px; max-width: 750px; margin: 0 auto; height: 2000px; line-height: 1.5; font-family: Ar
页面缩放导致布局变乱
m0_37973043的博客
06-07 2991
给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值