限制html窗口最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...

这里以vue-cli初始化的项目为例：

1. body,html

html,

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%;

background-color: #09152C;

display: flex;

flex-direction: column;

.header {

height: 57px;

background-color: red;

color: #ffffff;

display: flex;

align-items: center;

padding: 0 20px;

font-size: 16px;

font-weight: bold;

}

.content {

flex-grow: 1; // 让content高度铺满剩余的home

display: flex; //让里面的直接子元素高度占满整个content

padding: 0 10px 32px;

> div {

width: 100%;

background: yellow;

color: #000;

}

4.最终效果

此时屏幕宽度小于1024px，出现了横向滚动，这样页面就不会因为太窄而影响到布局

限制html窗口最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...相关推荐

html页面整体缩小,浏览器缩放原理以及窗口、html页面大小
在这篇文章里,将会解释视窗(viewports)和各种重要元素(例如元素)的宽度是如何工作的,同样也会解释浏览器窗口(window)和屏幕(screen)的宽度问题. 概念:设备的pixels和CSS ...
elementui table 在jsp页面中横向滚动条的问题
问题描述在jsp中使用elementUI中的table:没有固定列,但是横向滚动条没有,写了多个页面,同样的样式同样的布局同样的table,不同就是数据列还有table的操作事件,但是有的能够出来, ...
27、HTML框架（同一个浏览器窗口中显示不止一个页面）
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <iframe src="https://www.17173.com/" width="500" ...
软件测试面试题：在一个页面上，点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面. Selenium也提供了对应的API来处理.简述这个查找新窗口的过程.参考答案:1)首先需要了解下,每个窗口都是有 ...
html 设置最小宽度,总结css中最小宽度min-width和最大宽度max-width属性的使用方法...
CSS宽度属性为单词width,宽度width包含了两个重要的属性:最大宽度属性max-width和最小宽度属性min-width.最大宽度属性(max-width)用来定义宽度显示的最大值,当拖动浏 ...
网页编程，JS模态窗口，子页面向父页面传递值
题目:在父页面中,点击"编辑"链接,跳至子页面中进行编辑,编辑完成后点击"确定",子页面关闭,将编辑内容回传至父页面. 原理:在父页面中,点击"编辑& ...
javascript调用父窗口（父页面）的方法
window.parent与window.opener的区别 javascript调用主窗口方法 1: window.parent 是iframe页面调用父页面对象举例: a.html Html ...
BOM:窗口位置、页面视口大小、window.open
获取窗口位置: // 兼容所有浏览器的写法var leftPos = (typeof window.screenLeft === "number") ? window.screen ...
HashTab---Windows资源管理器的文件属性窗口中添加了一个叫做”文件校验”的标签...
HashTab 是一个优秀的 Windows 外壳扩展程序,它在 Windows 资源管理器的文件属性窗口中添加了一个叫做"文件校验"的标签.该标签可以帮助你方便地计算文件的 MD ...

限制html窗口最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...

限制html窗口最小宽度,给页面一个最小宽度，小于这个宽度时，出现横向滚动条...相关推荐

最新文章

热门文章