HTML/CSS - 奇怪的调整大小?

标签 html css window size

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 8 年前

我正在制作一个网站,但我希望它在我更改窗口大小时调整大小。

所以我做的一切都是百分比。

谁能解释为什么它仍然表现得如此奇怪,以及如何解决它?

代码: http://pastebin.com/JUB6Zvri

最佳答案

不要对 left 、 right 、 top 和 bottom 使用边距,而只使用 left 、 right 、 top 和 bottom 属性

看看我做了什么

<!DOCTYPE html>
        <head>
        <style type="text/css">
html {
        height: 100%;
        background-color: #272C34;
        margin: 0%;
        padding: 0%;
}

body{
        height: 100%;
        position: static;
        margin: 0%;
        padding: 0%;
}

#whitetop {
        width: 100%;
        height: 4%;
        position: absolute;
        background-color: #E8E8E7;
        top: 10%;
       left: 0%;
        right: 0%;
        bottom: -10%;
        padding: 0%;
        z-index: 1;
}

#whitebot {
        width: 100%;
        height: 30%;
        position: absolute;
        background-color: #E8E8E7;
        top: 32%;
        left: 0%;
        right: 0%;
        bottom: -32%;
        padding: 0%;
        z-index: 1;
}

#earth {
        width: 100%;
        height: 20%;
        position: absolute;
       top: 10%;
        left: 0%;
        right: 0%;
        bottom: -10%;
        z-index: 0;
}

        </style>
                <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
                <title>Home</title>
        </head>
        <body>
                <div id="whitetop">
                </div>
                <div id="whitebot">
                </div>
                <img src="earth2.jpg"/ id="earth">
        </body>
</html>

关于HTML/CSS - 奇怪的调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27878408/

上一篇:html - 如何让导航元素在CSS中的每个导航元素之后都有水平线

下一篇:javascript - 更改数据表 <tr> 的背景颜色

相关文章:

css - 如何在 AngularJS 中动态添加 css?

wpf - 无法拖动和移动 WPF 表单

html - 100%高度容器通过绝对定位被推出IE视口(viewport)

html - GWT 中的触摸调整大小面板

javascript - 在坐标系 Easeljs 上定位标签

jquery - 如何将图像定位在固定的响应式 Bootstrap 图像上

html - 是否可以在 Notepad++ 中为 2 种语言设置自动完成?

c# - 如何找到正在运行的进程的窗口句柄?

python - Tkinter 中的程序窗口锁定

javascript - 使用 javascript 进行打印时限制每页的行数