gpt4 book ai didi

html - 放大 ?内容 != 100%

转载 作者:太空宇宙 更新时间:2023-11-04 13:19:28 25 4
gpt4 key购买 nike

我在我的一个元素中遇到了问题......

默认情况下,我的内容容器是 100%,但当我放大时,容器变得小于 100%

第一张图片:

normal zoom

第二张图片:

zoomed in

这是我的 HTML 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="body_wrap">
<header>
<!-- content -->
</header>

<section class="main">
<div class="content_wrapper">
<div class="content clearfix">
<!-- content -->
</div>
</div>
</section>
</div>
</body>
</html>

和 CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 100% }
body { font-size: 62.5%; line-height: 1 }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none }
a { text-decoration: none; }

::-moz-selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);}
::selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);}
*, textarea:focus, input:focus { outline: none; }
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden}

body {
background: #FF0000 url('http://wallpapers.wallbase.cc/rozne/wallpaper-3027963.jpg') no-repeat 50% 0%;
background-size: 100%;
font-family: "Lato", Arial, "Lucida Grande", sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

header {
position: relative;
width: 960px;
height: 700px;
margin: 0 auto;
padding: 0;
}

section.main {position: relative;width: 100%;background: #FFF;z-index: 5;min-height: 890px;}
section.main .content_wrapper {
position: absolute;
margin: 0 auto;
width: 100%;
background: url('http://www.7image.ru/pics/1113/406472675.png') repeat-x;
top: -10px;
}
section.main .content_wrapper .content {
position: relative;
width: 960px;
padding: 20px 0;
margin: 0 auto;
}

提前致谢

最佳答案

您将 header 设置为 width: 960px。这会导致页面在放大时水平扩展并且屏幕宽度变得小于 960px。将您的 body-wrap div 设置为 overflow: hidden,这样您的 header 就不会再 overflows 您的 body 包裹

关于html - 放大 ?内容 != 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20107177/

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