html - CSS 页脚不会位于视口(viewport)底部和其他杂项问题-6ren

html - CSS 页脚不会位于视口(viewport)底部和其他杂项问题

转载作者：行者123 更新时间：2023-11-28 06:16:45

我正在通过各种在线教程和这个出色的网站自学如何编写 html/css。

我编写了这个简单的 css 布局作为测试。

一些我似乎无法锻炼的事情:

当没有足够的内容填满屏幕时，如何强制页脚贴在视口(viewport)的底部？
顶部的导航栏，当屏幕尺寸缩小时，最好的折叠方式是什么？
最后，请随时批评我的代码，我们将不胜感激任何提示、提示或类(class)。

提前致谢!

代码如下:

@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400|Open+Sans:400,300,600,700,800);


body {
	font-size: 87.5%;
	font-family: 'open sans', sans-serif;
	line-height: 1.3;
	text-align: left;
	background-color: lightgrey;
	margin: 0;
	min-height: 100%;
}

h1 {
	font-size: 20px;
	font-family: 'open sans', sans-serif;
}

h2 {
	margin: 0;
	border-bottom: solid black 2px;
}

.wrapper {
	margin: 0 auto;
	width: 70%;
}

header {
	background-color: white;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	width: 30%;
	height: 200px;
	background-color: rgb(105, 64, 16);
	border-radius: 0px 0px 0px 10px;
	text-align: center;
	display: flex;
	align-items: center;
}

.logo h1 {
	margin: 0 auto;
	font-size: 30px;
	color: white;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

nav {
	width: 70%;
	background-color: rgb(50, 77, 105);
	border-radius: 0px 0px 10px 0px;
	min-height: 200px;
	overflow: hidden;

}
nav ul {
	width: 90%;
	height: auto;
	margin: 50px auto;
	padding: 15px;
	border-radius: 10px 10px;
	background-color: rgb(224, 204, 142);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	}


nav ul li {
	list-style: none;
	display: inline;
	padding: 25px;
	margin: 0 12px;
	border-radius: 10px 10px;
	background-color: rgb(121, 207, 219);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
  color: rgb(17, 44, 96);


}

.content-wrapper {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	clear: both;
}

.home-content {
	width: 66%;
	padding: 20px;
}

.home-sidebar {
	width: 26%;
	padding: 20px;
	overflow: hidden;
}

footer {
	background-color: rgb(50, 77, 105);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer ul {
	list-style: none;
	margin: 20px 0px 10px 0px;
	padding: 0;
}

footer ul li {
		display: inline;
		padding: 0px 10px;
		color: white;
	}

footer h1 {
	font-size: 30%;
	color: white;
	padding-bottom: 20px;
	padding-top: 10px;
	margin: 0;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/styles.css" >

 <title>Test</title>
    </head>


<body>
<div class="wrapper">

<header>

        <div class="logo">
        <h1>Logo Goes Here</h1>
        </div>

        <nav>
        <ul>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
        <li>Page 5</li>
        </ul>
        </nav>

</header>


<div class="content-wrapper">

    <div class="home-sidebar">

        <h2>Sidebar info</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</P>


    </div>

    <div class="home-content">

        <h2>Welcome to company name</h2>

        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>

        <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

</div>

    </div>


<footer>

<ul id="footNav">
    <li>Home</li>
    <li>Terms &amp; Conditions</li>
    <li>Privacy policy</li>
    <li>Copyright</li>
    <li>Disclaimer</li></ul>

    <h1 id="Copyright">Copyright &copy; 2016 Testing: Something &amp; Something. All Rights Reserved.
    </h1>


</footer>

</div>
</body>

<html/>

最佳答案

1- 要使页脚变粘，您可以使用

footer{
  position:fixed;
  bottom:0;
  width:100%;
}

2- 您可以通过 twitter-bootstrap 了解如何使您的网站具有响应性

3- 你的代码作为初学者来说很好，但你必须看到很多已经制作的网站才能产生类似的东西，你可以从 w3schools 中学到很多东西。

祝你好运!

关于html - CSS 页脚不会位于视口(viewport)底部和其他杂项问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35852124/

文章推荐： C++ : function gets pointer or refernce

文章推荐： javascript - 如何以 Angular 将 JSON 转换为 HTML

文章推荐： c++ - 为什么这些 C++ 元组不相等？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 页脚不会位于视口(viewport)底部和其他杂项问题