gpt4 book ai didi

html - 删除最小宽度条件下底部的空白

转载 作者:行者123 更新时间:2023-11-28 06:51:43 25 4
gpt4 key购买 nike

下面是我的html css代码

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title ng-bind="title +' | Game '">Platano</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="application/json; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico" />
<style>
html {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border:1px red solid;
height:100%;
}
body{
height:100%;
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
min-width: 500px;
overflow-x: scroll;
z-index: -2;
}
</style>
</head>
<body>
</body>
</html>

要观察桌面上的这个空白区域..按照以下步骤操作

第 1 步:打开此 html 文件或代码并打开 firebug...单击 firebug 中的移动图标,如下图所示。 enter image description here

第 2 步:您将看到如下所示的屏幕..现在确保选中“屏幕”复选框...如下图所示

enter image description here

第 3 步:现在通过选择任何设备或拖动屏幕(因为我已设置最小宽度:500 像素)将屏幕尺寸缩小到小于 500,然后按 (ctrl + f5) 或 (ctrl + shift + r)..现在你可以清楚地看到空白页面的页脚.. enter image description here

最佳答案

你要做的是,给 body 一个明确的定位,并让它成为left:0;并插入条件 min-width:500px; .
所以它会导致 html 根据屏幕扩展,但您的正文部分仍然是 left:0;固定宽度 500px .所以,最好删除 left:0;从体型上。它将使您的 body 成为一个液体容器。

关于html - 删除最小宽度条件下底部的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33730284/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com