缩小屏幕尺寸时内容旁边的空白

时间：2019-05-26 22:36:07

标签： html css responsive-design

我正在研究CSS并创建一个响应式网页。我已经开始从事媒体查询工作。当我最大化屏幕时，所有功能都可以按预期工作，但是当我减小其尺寸时，将隐藏不适合视口的内容，并且在其位置保留空白。可以看到该空间将屏幕滚动到一侧。为什么出现该空间而不是其余内容？我也不明白为什么我的内容不能显示在屏幕上，因为我使用的是元素宽度的百分比值。我的代码如下：

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body{
	width: 99.13vw;
}
body{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}
h2, h3{
	margin-top: 10px;
	margin-bottom: 10px;
}
a{
	text-decoration: none;
	transition: 0.2s linear;
}
header{
	background-color: rgb(93, 158, 76);
	display: flex;
	align-items: center;
	padding: 10px 30px;
	width: 100%;
}
header img{
	width: 45px;
}
header h1{
	font-family: 'Doppio One', cursive;
	margin-left: 10px;
	color: rgb(214, 245, 210);
}
nav ul{
	display: flex;
	list-style: none;
}
nav ul li a{
	margin-left: 55px;
}
nav a{
	color: rgb(230, 245, 229);
	font-size: 17px;
}
nav a:hover{
	background-color: rgb(143, 182, 135);
	padding: 10px 15px;
	margin: 0 -15px 0 40px;
}
nav img{
	display: none;
	width: 30px;
	height: 35px;
}
#firstsection{
	background-image: url(Images/coffee-3289259_1280.jpg);
	background-size: cover;
	height: 900px;
	position: relative;
}
#firstsection div{
	margin-top: 0;
	position: absolute;
	left: 100px;
	top: 150px;
	color: rgb(47, 119, 27);
	text-align: center;
}
#firstsection h1{
	margin-bottom: 45px;
}
#firstsection div a{
	font-weight: bold;
	border: 2px solid rgb(47, 119, 27);
	padding: 13px 30px;
	font-size: 16.5px;
	color: rgb(47, 119, 27);
}
#firstsection div a:hover{
	color: rgb(133, 163, 131);
	border: 2px solid rgb(133, 163, 131);
}
#textboxes{
	display: flex;
	margin-top: 50px;
	flex-wrap: wrap;
}
#textboxes div{
	text-align: center;
	margin: 15px 60px;
	border: 2px solid rgb(93, 158, 76);
	padding: 30px 30px;
	width: 27%;
}
#middlesection img:first-of-type{
	width: 55px;
}
#middlesection h2{
	text-align: center;
	width: 100%;
}
#lastsection{
	text-align: center;
}
#lastsection img{
	width: 30%;
	margin: 100px auto 0px;
}
#lastsection div{
	position: relative;
	bottom: 450px;
}
#lastsection div a:visited{
	color: blue;
}
footer{
	background-color: rgb(93, 158, 76);
	padding: 15px;
	color: rgb(214, 245, 210);
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer img{
	height: 35px;
	width: 35px;
	margin-right: 15px;
}
footer div{
	text-align: center;
}
@media screen and (max-width: 800px){
	#textboxes div{
		width: 100%;
	}
	#lastsection img{
		width: 85%;
	}
}
<!DOCTYPE html>
<html>
<head>
	<title>Finances | Manage your money easily</title>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
	<meta content="Bruno M. B. Sdoukos" name="author">
	<meta content="finances, managing money, spending control" name="keywords">
	<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header>
		<a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a> <a href="index.html">
		<h1>Finances</h1></a>
		<nav>
			<ul>
				<li>
					<a href="index.html">Home</a>
				</li>
				<li>
					<a href="#">About</a>
				</li>
				<li>
					<a href="#">Contact us</a>
				</li>
				<li>
					<a href="#">Register</a>
				</li>
				<li>
					<a href="#">Login</a>
				</li>
			</ul>
		</nav>
	</header>
	<main>
		<section id="firstsection">
			<div>
				<h1>Manage your money easily, anywhere, anytime.</h1><a href="#">Get started</a>
			</div>
		</section>
		<section id="middlesection">
			<div id="textboxes">
				<div>
					<img src="Images/icons8-increase-64.png">
					<h3>Concrete data</h3>
					<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
				</div>
				<div>
					<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
					<h3>Easy interface</h3>
					<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
				</div>
				<div>
					<img src="Images/icons8-natural-user-interface-2-filled-50.png">
					<h3>Fast access</h3>
					<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
				</div>
			</div>
		</section>
		<section id="lastsection">
			<img src="Images/board-1362851_1280.png">
			<div>
				<h2>Register now and enjoy<br>
				the best of Finances.</h2><a href="#">Create an account</a>
			</div>
		</section>
	</main>
	<footer>
		<img src="Images/icons8-fund-accounting-80.png">
		<div>
			<p>A work of Bruno Sdoukos.</p>
		</div>
	</footer>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

实际上它不是隐藏的。标头中的链接恰好具有接近白色的颜色，以至于对比度真的很低。当标题的内容比视口宽时，它们会溢出标题的右侧。

最简单的解决方案是将flex-wrap:wrap赋予header，但我建议改用媒体查询来覆盖display:flex（以实现更好的向后兼容性）。

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 99.13vw;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}

h2,
h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  transition: 0.2s linear;
}

header {
  background-color: rgb(93, 158, 76);
  display: flex;
  align-items: center;
  padding: 10px 30px;
  width: 100%;
}

@media all and (max-width:56em) {
  header {
    display: block;
  }
  header>a,
  header>nav {
    display: inline-block;
  }
}

header img {
  width: 45px;
}

header h1 {
  font-family: 'Doppio One', cursive;
  margin-left: 10px;
  color: rgb(214, 245, 210);
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li a {
  margin-left: 55px;
}

nav a {
  color: rgb(230, 245, 229);
  font-size: 17px;
}

nav a:hover {
  background-color: rgb(143, 182, 135);
  padding: 10px 15px;
  margin: 0 -15px 0 40px;
}

nav img {
  display: none;
  width: 30px;
  height: 35px;
}

#firstsection {
  background-image: url(Images/coffee-3289259_1280.jpg);
  background-size: cover;
  height: 900px;
  position: relative;
}

#firstsection div {
  margin-top: 0;
  position: absolute;
  left: 100px;
  top: 150px;
  color: rgb(47, 119, 27);
  text-align: center;
}

#firstsection h1 {
  margin-bottom: 45px;
}

#firstsection div a {
  font-weight: bold;
  border: 2px solid rgb(47, 119, 27);
  padding: 13px 30px;
  font-size: 16.5px;
  color: rgb(47, 119, 27);
}

#firstsection div a:hover {
  color: rgb(133, 163, 131);
  border: 2px solid rgb(133, 163, 131);
}

#textboxes {
  display: flex;
  margin-top: 50px;
  flex-wrap: wrap;
}

#textboxes div {
  text-align: center;
  margin: 15px 60px;
  border: 2px solid rgb(93, 158, 76);
  padding: 30px 30px;
  width: 27%;
}

#middlesection img:first-of-type {
  width: 55px;
}

#middlesection h2 {
  text-align: center;
  width: 100%;
}

#lastsection {
  text-align: center;
}

#lastsection img {
  width: 30%;
  margin: 100px auto 0px;
}

#lastsection div {
  position: relative;
  bottom: 450px;
}

#lastsection div a:visited {
  color: blue;
}

footer {
  background-color: rgb(93, 158, 76);
  padding: 15px;
  color: rgb(214, 245, 210);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer img {
  height: 35px;
  width: 35px;
  margin-right: 15px;
}

footer div {
  text-align: center;
}

@media screen and (max-width: 800px) {
  #textboxes div {
    width: 100%;
  }
  #lastsection img {
    width: 85%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Finances | Manage your money easily</title>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
  <meta content="Bruno M. B. Sdoukos" name="author">
  <meta content="finances, managing money, spending control" name="keywords">
  <link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
    <a href="index.html">
      <h1>Finances</h1>
    </a>
    <nav>
      <ul>
        <li>
          <a href="index.html">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
        <li>
          <a href="#">Login</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="firstsection">
      <div>
        <h1>Manage your money easily, anywhere, anytime.</h1><a href="#">Get started</a>
      </div>
    </section>
    <section id="middlesection">
      <div id="textboxes">
        <div>
          <img src="Images/icons8-increase-64.png">
          <h3>Concrete data</h3>
          <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
        </div>
        <div>
          <img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
          <h3>Easy interface</h3>
          <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
        </div>
        <div>
          <img src="Images/icons8-natural-user-interface-2-filled-50.png">
          <h3>Fast access</h3>
          <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
        </div>
      </div>
    </section>
    <section id="lastsection">
      <img src="Images/board-1362851_1280.png">
      <div>
        <h2>Register now and enjoy<br> the best of Finances.</h2><a href="#">Create an account</a>
      </div>
    </section>
  </main>
  <footer>
    <img src="Images/icons8-fund-accounting-80.png">
    <div>
      <p>A work of Bruno Sdoukos.</p>
    </div>
  </footer>
</body>

</html>

相关问题
最新问题