Question

我希望我的主页网站能够在多个屏幕上做出响应（因此我被告知要使用百分比），我希望网站由四部分组成：

屏幕顶部的导航栏，两侧（包括顶部）延伸到屏幕边缘。为简单起见，我的背景颜色为黑色。 [约。从顶部开始的页面高度的10％]
然后我想在＆＃34;中＆＃34;主页的部分背景颜色为绿色。 [60％]
在底部，我想要一个背景颜色为蓝色的较小区域。 [20％]
与导航栏大小相同的页脚，其颜色为黑色。 [10％]

我的问题是： - 我如何定位，或者我需要做什么才能让主要和页脚标签内的div成为我想要的颜色和各自的高度？

P.S。我能够更改导航栏的背景颜色，但主要或页脚元素没有任何作用。

CGPoint A = // some point
CGPoint B = // some point

CGFloat dx = B.x - A.x;
CGFloat dy = B.y - A.y;
CGFloat rotation = (dx < 0)? M_PI+atan2(dy,dx) : -atan2(dy,dx);

这是CSS代码：

<html>
<head>
    <!--Header Stuff-->
</head>
<body>
        <div class="wrapper">
            <nav id="navigaton_bar">
                <!--Navigation Stuff-->
            </nav>
            <main>
                <div class="home_body">
                    <!--Content-->
                </div>
                <div class="lower_home_body">
                    <!--Content-->
                </div>
            </main>
            <footer class="footer_bar">
                <!--Footer Stuff-->
            </footer>
       </div> <!--END OF WRAPPER-->
    </body>
</html>

Answer 1

代码问题：

导航的id属性中的错字：navigaton_bar（与CSS中的navigation_bar对比。）
您需要为wrapper元素将高度设置为100％。
您需要将main元素的高度设置为80％，然后对两个包含的div使用75％和25％，以达到整个页面高度的60％和20％。
您不应该在导航栏上有绝对定位。

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.wrapper {
    height:100%;
}
#navigation_bar {
    background-color: black;
    height: 10%;
    width: 100%;
}
main {
    height:80%;
}
.home_body {
    background-color: green;
    height: 75%;
    width: 100%;
}
.lower_home_body {
    width: 100%;
    height: 25%;
    background-color: blue;
}
.footer_bar {
    width: 100%;
    height: 10%;
    background-color: black;
}

＆＃13;

<div class="wrapper">
     <nav id="navigation_bar">
         <!--Navigation Stuff-->
     </nav>
     <main>
         <div class="home_body">
             <!--Content-->
         </div>
         <div class="lower_home_body">
             <!--Content-->
         </div>
     </main>
     <footer class="footer_bar">
         <!--Footer Stuff-->
     </footer>
</div> <!--END OF WRAPPER-->

＆＃13;

Answer 2

我每天都学到更多东西，但到目前为止，我已经学会了CSS中的响应式设计使用了页面宽度的百分比，而不是高度。

响应性通常涉及在移动屏幕尺寸中开始设计，然后随着屏幕尺寸变大而添加内容。这也意味着用户通常向下滚动以查看更多，并且在全尺寸桌面上水平的导航栏项目将在移动屏幕尺寸上堆叠在彼此之上，或者最小化并由图标或“菜单”表示，由用户触摸，从而显示堆叠菜单。

Hope this link helps.

将基本div和内容添加到html文件，然后开始使用CSS文件设置颜色和高度样式。

Answer 3

尝试使用vh而不是％，例如

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    }
#navigation_bar {
    background-color: black;
    position: absolute;
    height: 10vh;
    width: 100%;
    }
.home_body {
    background-color: green;
    height: 60vh;
    width: 100%;
    }
.lower_home_body {
    width: 100%;
    height: 20vh;
    background-color: blue;
    }
.footer_bar {
    width: 100%;
    height: 10vh;
    background-color: black;
    }

麻烦使用百分比来定位Div以改变高度

3 个答案: