当我调整大小时,阻止浏览器推动所有内容

2023-12-29

当用户调整浏览器窗口大小时,如何防止整个网站崩溃?

该网站看起来很完美——只有当它调整到较小的尺寸时,它才会变得完全混乱。


在它周围放置一个固定最小宽度的包装器:

Before:

<html>
<body>
<!-- Your content -->
</body>
</html>

After:

<html>
<body>
<div style="min-width: 960px; margin: 0 auto;">
<!-- Your content -->
</div>
</body>
</html>

这将确保您的页面始终显示为至少 960 像素的最小宽度(如果浏览器窗口较窄,则会创建水平滚动条)。

您也可以选择使用width代替min-width,如果您希望页面始终显示为特定宽度,即使浏览器也更宽。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当我调整大小时,阻止浏览器推动所有内容 的相关文章

  • 获取 Angular ng-option 下拉列表的选定文本

    我的角度代码中有这个下拉列表 div class btn group div
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • HTML5中如何隐藏video标签的全屏按钮

    我需要隐藏 HTML5 中视频标签的全屏按钮 有什么办法可以实现吗 Thanks 我认为你可以通过更改 css 来实现这一点 document fragments 这些是 DOM1 规范 所有浏览器都支持 但关于样式 我不确定 Simple
  • 智能位置表单字段

    我的用户注册表单上有一个文本字段location 我本质上希望这个字段能够根据 Google 地图 或同等地图 进行验证 只允许有效位置通过 最好采用类似的格式滑铁卢 伦敦 or 伦敦 英国 要求 除了位置名称之外 我还想返回该位置中心的坐
  • 如何使用 javascript 触发表单验证的本机验证气泡/工具提示?

    我有一个附加了 html5 验证 必需 等 属性的表单 有没有一种方法可以触发本机验证气泡 工具提示的出现 而无需模拟表单的提交按钮上的 单击 正如评论中所述 您可以使用 reportValidity 方法 这是广泛支持 https dev
  • Imagemagick 转换调整大小然后裁剪

    我有超过 1000 张不同分辨率的图像 例如 1234x2122 4400x5212 等 我想将它们全部转换为固定的 100x100 尺寸 所以 首先 我需要调整图像大小并保持比例 并获得 100xA 或 Ax100 其中 A gt 100
  • PHP:如何防止不必要的换行

    我正在使用 PHP 创建一些基本的 HTML 标签始终相同 但实际链接 标题对应于 PHP 变量 string p a href strong i title i i strong a br echo string fwrite outfi
  • 列表中允许 div 吗? [复制]

    这个问题在这里已经有答案了 我知道DIV inside LI是不允许的 但我最近在许多 大 网站上看到了它 例如粉碎杂志 网页设计师墙 etc 我尝试验证网站 但它们有错误 但没有任何信息DIV in LI 那么我可以在里面使用它吗LI 我
  • 我无法注入带有“!important”规则的样式[重复]

    这个问题在这里已经有答案了 我尝试使用以下代码注入样式 document body style color green important Per CSS 级联引用 http www w3 org TR CSS2 cascade html
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • 3 Div 盒子不适合容器

    在页面上 jerkydirect com base opportunity 容器内有 3 个带有图片的盒子 然而 当在大屏幕上查看时 最后一个框粘在右侧 它在较小的窗口或移动设备上看起来很棒 但在较大的屏幕上则不然 我怎样才能让它正确对齐
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 如何通过双击在浏览器中打开 ipynb 文件

    以前 我安装了 Canopy 当时 我只需双击 ipynb 文件并在浏览器中打开它们即可 但是 后来我需要Anaconda 一旦我安装了它 这个功能就没有了 现在我只希望能够简单地双击 ipynb 文件 然后该文件就会在 Firefox 中
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2
  • 为什么 Firefox 会忽略缓存标头并在刷新时重新验证?

    我有一些不可变的图像资源 可以永久缓存 Chrome 似乎尊重我的响应标头 并且不会重新验证资源 以下是 Chrome 中其中一项资源的示例 正如你所看到的 我包括cache control public max age expires e
  • 在 Selenium WebDriver 上如何从 Span 标签获取文本

    在 Selenium Webdriver 上 如何从 span 标记检索文本并打印 我需要提取文本UPS Overnight Free HTML代码如下 div id customSelect 3 class select wrapper
  • 如何在 Aframe 中的平面上加载 gif(具有透明度)(故障)?

    大家好 我是 Aframe 的新手 正在尝试在空间网络环境中设置一大堆 gif 我在飞机上加载 gif 时遇到了一些困难 我已经通过 Aframe 的资产文件夹加载了图像 故障 目前它看起来像这样
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出

随机推荐