CSS 网站 Div 在放大时不会调整大小

问题描述 投票：0回答：2

这真的很菜鸟，但我创建了一个网页，当我放大所有内容（包括文本和背景图像）时，除了文本所在的 div 的背景颜色之外，也会放大。

gif 链接：https://giphy.com/gifs/63JDIt4ryQqsFdYzi7

非常感谢您的帮助:)

这是代码：`HTML

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
    
    <!-- this part sends your site to another file for information -->
    <link rel="stylesheet" type="text/css" href="MoneyMaking.css">

    <title>Setting up the format for a website</title>
</head>
    

<body>
    
<div id="NavBar">
    
    <div id="Ntext">
    <h1>Money Makers Society</h1>
    </div>
    <div id="Line"></div>
</div>

<div id="Body">
    <div id="Btext">
    <h2>Top 3 ways of making money:</h2>
    <hr>
    <p>
        1.) Donating to charity <br>
        2.) Giving to the poor <br>
        3.) Holding giveaways <br>
        4.) My personal favourite is hosting a dropparty
    </p>

</div>
</div>
<div id="Footer">
    
    <div id="Ftext">
    <p>Ads or links to youtube can go here :)</p>
    </div>
    <div id="Line1"></div>
</div>

</body>
</html>

CSS：

html {
    background-image: url("Leaf.png");
}

body {
    color: #003300;
}

#NavBar {
    background-color: #cc6600;
    position: absolute;
    left: 25%;
    top: 0%;
    width: 50%;
    height: 10%;


}

#Ntext {
    position: absolute;
    top: 0%;
    left: 27%;
}

#Line {
    position: absolute;
    bottom: 0%;
    left: 0%;
    height: 10%;
    width: 100%;
    background-color: white;
}

#Body {
    
    position: absolute;
    background-color: #cc6600;
    left: 25%;
    top: 10%;
    width: 50%;
    height: 85%;
}

#Btext {
    position: absolute;
    left: 27%;
    top: 0%;

}

#Footer {
    background-color: #cc6600;
    position: absolute;
    left: 25%;
    top: 95%;
    width: 50%;
    height: 5%;
}

#Ftext {
    position: absolute;
    left: 30%;
    bottom: -10px;
}

#Line1 {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 10%;
    width: 100%;
    background-color: white;
}
html css
2个回答
0
投票

你的整个风格是基于百分比的。如果您使用“rem”，它可以解决您的问题，但我不确定您是否想支持不同的页面大小（移动支持等）

#Body {
   width: calc(40% + 10rem);
}
0
投票

为什么要使用这么多

absolute
定位？为什么你有两个文档类型？为什么这么多高度和位置是根据百分比固定的？我认为你需要用更灵活的布局来彻底修改它。实际上不应该为这类东西指定高度，如果您确实想指定它们，请使用 
min-height
来代替，以便元素在内容不适合时可以增长。

无论如何，放大时宽度保持不变的原因是你将其设置为容器的 50%，在本例中是整个主体。无论缩放级别或浏览器大小如何，这都将是 50%。我建议暂时将宽度设置为 100% 并将最大宽度设置为 960px，作为起点。这在移动设备和桌面设备上看起来应该没问题，尽管 960px 是一个有点旧的约定，没有必要遵守。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.