如果我缩小浏览器的屏幕，为什么背景的宽度会缩小？

时间：2016-07-03 23:33:02

标签： html css web

我遇到了一个神秘的问题。我有一个网站，它看起来像常规屏幕，就像我希望它看起来。但footer中的问题（但在代码中称为header）。因此，当我缩小浏览器或在手机上查看它时，页脚缩小了自己的背景颜色宽度三倍。

enter image description here

我试图清空所有那块，因为我觉得里面的东西可能会烦恼但是没有。我也尝试在min-width设置width和vw，但这些都不起作用（我不知道解决方案，所以我需要你的帮助！谢谢！< / p>

＆＃13;
＆＃13; 
/* line 1, ../sass/screen.scss */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

/* line 62, ../sass/screen.scss */
body {
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover;
}

/* line 74, ../sass/screen.scss */
.back {
  position: fixed;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: red;
  text-align: center;
  z-index: 9999999999;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
}
/* line 84, ../sass/screen.scss */
.back:hover {
  width: 50px;
  height: 50px;
}
/* line 88, ../sass/screen.scss */
.back:hover p {
  line-height: 50px;
}
/* line 91, ../sass/screen.scss */
.back p {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  line-height: 40px;
  font-size: 15px;
  color: white;
}

/* line 99, ../sass/screen.scss */
.container {
  width: 1070px;
  height: auto;
  margin: 0 auto;
  padding: 0 10px;
}

/* line 105, ../sass/screen.scss */
.upper {
  width: 100%;
  height: 130px;
  position: relative;
}
/* line 109, ../sass/screen.scss */
.upper img {
  position: absolute;
  left: 0;
  width: 238px;
  height: 37px;
  top: 50%;
  margin-top: -20px;
}
/* line 117, ../sass/screen.scss */
.upper ul {
  height: 50px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -15px;
}
/* line 123, ../sass/screen.scss */
.upper ul li {
  list-style-type: none;
  display: inline-block;
  margin: 0 15px;
  height: 30px;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
}
/* line 129, ../sass/screen.scss */
.upper ul li:hover {
  background: white;
}
/* line 132, ../sass/screen.scss */
.upper ul li:hover a {
  color: #1B1B2D;
}
/* line 135, ../sass/screen.scss */
.upper ul li a {
  font-size: 17px;
  font-family: ColaThin;
  font-weight: 700;
  color: white;
  line-height: 52px;
  text-decoration: none;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

/* line 145, ../sass/screen.scss */
.owl-pagination {
  display: none !important;
}

/* line 149, ../sass/screen.scss */
.owl-theme .owl-controls .owl-buttons {
  position: absolute;
  width: 100%;
  top: 30%;
}

/* line 155, ../sass/screen.scss */
.owl-wrapper-outer {
  position: relative;
  width: 100%;
}
/* line 158, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) {
  position: relative;
  background: url(../img/ipad.png) no-repeat;
  background-position: 70% 0;
  width: 100%;
  height: 400px;
}
/* line 164, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text {
  position: absolute;
  right: 65%;
  padding-top: 50px;
}
/* line 168, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text p {
  text-align: right;
}
/* line 171, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text .p-1 {
  color: #e7e8ea;
  font-family: ColaBold;
  font-size: 45px;
  font-weight: 700;
  line-height: 52px;
  text-transform: uppercase;
}
/* line 179, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text .p-2 {
  color: #d7d7e3;
  font-family: AlexReg;
  font-size: 39px;
  line-height: 52px;
  font-weight: 400;
}
/* line 186, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text .p-3 {
  color: #d7d7e3;
  font-family: AlexReg;
  font-size: 39px;
  line-height: 52px;
  font-weight: 700;
}
/* line 193, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text .p-4 {
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 23px;
  font-weight: 100;
}
/* line 200, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text a input {
  color: white;
  font-family: ColaReg;
  font-size: 23px;
  font-weight: 500;
  width: 181px;
  height: 45px;
  float: right;
  margin-top: 35px;
  box-shadow: 0 60px 30px -15px rgba(0, 0, 0, 0.4);
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  background: linear-gradient(to top, #164182 0%, #2d6bc2 100%);
  background: -webkit-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
  background: -moz-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
  background: -o-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
  background: -ms-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
  cursor: pointer;
}
/* line 213, ../sass/screen.scss */
.owl-wrapper-outer div:not(.text) .text a input:hover {
  background: linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
  background: -webkit-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
  background: -moz-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
  background: -o-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
  background: -ms-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
}

/* line 222, ../sass/screen.scss */
.content {
  text-align: center;
}
/* line 224, ../sass/screen.scss */
.content .block1 {
  text-align: right;
}
/* line 227, ../sass/screen.scss */
.content .block2, .content .block3, .content .block1, .content .block4 {
  margin-left: 9px;
  margin-right: 9px;
}
/* line 231, ../sass/screen.scss */
.content .block {
  display: inline-block;
  width: 240px;
  height: 175px;
  line-height: 155px;
  border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border: 3px solid white;
  background: linear-gradient(top, white, #ccc);
  background: -webkit-linear-gradient(top, white, #ccc);
  background: -moz-linear-gradient(top, white, #ccc);
  background: -o-linear-gradient(top, white, #ccc);
  background: -ms-linear-gradient(top, white, #ccc);
  opacity: .7;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
}
/* line 241, ../sass/screen.scss */
.content .block:hover {
  opacity: 1;
}
/* line 244, ../sass/screen.scss */
.content .block img {
  vertical-align: middle;
}
/* line 247, ../sass/screen.scss */
.content .block p {
  text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
  -moz-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
  -ms-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
  -o-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
  -webkit-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
  color: #8c8c92;
  font-family: Calibri;
  font-size: 19px;
  font-weight: 400;
  line-height: 0;
  text-align: center;
  margin-top: -5px;
}
/* line 258, ../sass/screen.scss */
.content .block3 img {
  margin-right: -25px;
}

/* line 262, ../sass/screen.scss */
.text-box {
  display: inline-block;
  width: 33%;
  margin-top: 40px;
}
/* line 266, ../sass/screen.scss */
.text-box img {
  float: left;
  margin-top: 5px;
}
/* line 270, ../sass/screen.scss */
.text-box h3 {
  margin-left: 45px;
  color: #505050;
  font-family: ColaThin;
  font-size: 25px;
  font-weight: 600;
  line-height: 23px;
}
/* line 278, ../sass/screen.scss */
.text-box p {
  font-size: 14px;
  font-family: ColaReg;
  font-weight: 400;
  color: #505050;
  line-height: 20px;
}
/* line 281, ../sass/screen.scss */
.text-box p:first-of-type {
  margin-left: 45px;
}
/* line 284, ../sass/screen.scss */
.text-box p:last-of-type {
  margin-top: 20px;
}

/* line 289, ../sass/screen.scss */
.main-content {
  position: relative;
  height: auto;
  text-align: center;
}
/* line 293, ../sass/screen.scss */
.main-content h3 {
  text-align: center;
  margin-top: 40px;
  font-size: 27px;
  font-family: ColaReg;
  font-weight: 400;
  color: #505050;
  line-height: 23px;
}
/* line 298, ../sass/screen.scss */
.main-content img {
  float: left;
  display: block;
}
/* line 302, ../sass/screen.scss */
.main-content ul {
  margin-top: 20px;
  margin-left: 420px;
}
/* line 305, ../sass/screen.scss */
.main-content ul li {
  font-size: 15px;
  font-family: ColaReg;
  font-weight: 400;
  color: #828181;
  line-height: 30px;
  list-style-image: url(../img/list.jpg);
}
/* line 310, ../sass/screen.scss */
.main-content input {
  clear: both;
  display: inline-block;
  width: 130px;
  height: 34px;
  background: #2d6bc2;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  font-size: 19px;
  font-family: ColaReg;
  font-weight: 400;
  color: white;
  line-height: 23px;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  cursor: pointer;
  margin: 0 15px;
  margin-top: 20px;
}
/* line 322, ../sass/screen.scss */
.main-content input:hover {
  background: #2860ad;
}

/* line 328, ../sass/screen.scss */
.main-content-2 {
  width: 100%;
  height: auto;
}
/* line 331, ../sass/screen.scss */
.main-content-2 ul {
  margin-top: 50px;
}
/* line 333, ../sass/screen.scss */
.main-content-2 ul li:first-child {
  border: none !important;
}
/* line 336, ../sass/screen.scss */
.main-content-2 ul li {
  list-style-image: url(../img/list2.jpg);
  font-size: 15px;
  font-family: ColaReg;
  font-weight: 400;
  color: #828181;
  line-height: 35px;
  border-top: 1px solid #ccc;
}

/* line 344, ../sass/screen.scss */
header {
  width: 100%;
  height: 340px;
  background: linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
  background: -webkit-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
  background: -moz-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
  background: -o-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
  background: -ms-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
  margin-top: 30px;
}
/* line 349, ../sass/screen.scss */
header .upper {
  height: 85px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
  position: relative;
  vertical-align: middle;
  display: table;
}
/* line 357, ../sass/screen.scss */
header .upper .twitter {
  background: white;
  height: 65px;
  width: 65px;
  float: left;
  margin-top: 11px;
  display: table-cell;
  border-radius: 50px;
  -ms-border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}
/* line 366, ../sass/screen.scss */
header .upper .twitter:hover {
  background: #0099e8;
}
/* line 369, ../sass/screen.scss */
header .upper .twitter:hover i {
  color: white;
}
/* line 372, ../sass/screen.scss */
header .upper .twitter i {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  color: #49495C;
  line-height: 65px;
  display: table-cell;
  width: 65px;
  vertical-align: middle;
  font-size: 40px;
  text-align: center;
}
/* line 383, ../sass/screen.scss */
header .upper p {
  font-size: 15px;
  font-family: ColaThin;
  font-weight: 400;
  color: white;
  line-height: 25px;
  opacity: .8;
  padding-left: 80px;
  vertical-align: middle;
  display: table-cell;
}

/* line 393, ../sass/screen.scss */
.first {
  width: 49%;
  height: auto;
  display: inline-block;
  float: left;
}
/* line 398, ../sass/screen.scss */
.first h3 {
  color: white;
  font-family: ColaReg;
  font-size: 25px;
  font-weight: 300;
  line-height: 23px;
  margin-top: 20px;
}
/* line 406, ../sass/screen.scss */
.first p {
  color: white;
  opacity: .8;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  margin-top: 15px;
}
/* line 415, ../sass/screen.scss */
.first input[type="text"] {
  margin-top: 20px;
  background: #242439;
  box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  width: 213px;
  height: 28px;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  float: left;
  /* Firefox 19+ */
  /* Firefox * Firefox 18- */
}
/* line 430, ../sass/screen.scss */
.first input[type="text"]::-moz-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 438, ../sass/screen.scss */
.first input[type="text"]:-moz-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 446, ../sass/screen.scss */
.first input[type="text"]:-ms-input-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 454, ../sass/screen.scss */
.first input[type="text"]::-webkit-input-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 463, ../sass/screen.scss */
.first .social {
  float: left;
  margin-top: 15px;
}
/* line 466, ../sass/screen.scss */
.first .social div:nth-of-type(2) {
  margin-left: 25px;
  margin-right: 25px;
}
/* line 470, ../sass/screen.scss */
.first .social div {
  width: 50px;
  height: 50px;
  background: white;
  display: inline-block;
  line-height: 50px;
  text-align: center;
  border-radius: 50px;
  -ms-border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  cursor: pointer;
}
/* line 480, ../sass/screen.scss */
.first .social div:hover {
  background: #0099e8;
}
/* line 483, ../sass/screen.scss */
.first .social div:hover i {
  color: white;
}
/* line 486, ../sass/screen.scss */
.first .social div i {
  font-size: 23px;
  color: #4D4D62;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
}
/* line 493, ../sass/screen.scss */
.first input[type="button"] {
  color: #363648;
  margin-top: 20px;
  margin-left: 230px;
  font-family: ColaReg;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  background: #e7e8ea;
  width: 85px;
  height: 27px;
  cursor: pointer;
  display: block;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
}
/* line 508, ../sass/screen.scss */
.first input[type="button"]:hover {
  background: #ccced2;
}
/* line 512, ../sass/screen.scss */
.first div {
  display: inline-block;
  margin-top: 20px;
  clear: both;
}

/* line 519, ../sass/screen.scss */
.second {
  width: 49%;
  display: inline-block;
  height: auto;
  float: right;
}
/* line 525, ../sass/screen.scss */
.second form h3 {
  color: white;
  font-family: ColaReg;
  font-size: 25px;
  font-weight: 300;
  line-height: 23px;
  margin-top: 20px;
}
/* line 533, ../sass/screen.scss */
.second form input[type="text"]:first-of-type {
  margin-top: 20px;
}
/* line 536, ../sass/screen.scss */
.second form input[type="text"] {
  padding-left: 5px;
  padding-right: 5px;
  width: 213px;
  height: 28px;
  background: #242439;
  box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  width: 213px;
  height: 28px;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  margin-bottom: 18px;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  /* Firefox 19+ */
  /* Firefox * Firefox 18- */
}
/* line 552, ../sass/screen.scss */
.second form input[type="text"]::-moz-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 560, ../sass/screen.scss */
.second form input[type="text"]:-moz-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 568, ../sass/screen.scss */
.second form input[type="text"]:-ms-input-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 576, ../sass/screen.scss */
.second form input[type="text"]::-webkit-input-placeholder {
  opacity: 0.2;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}
/* line 585, ../sass/screen.scss */
.second form textarea {
  margin-top: 20px;
  float: right;
  background: #242439;
  box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  color: #e7e8ea;
  font-family: ColaThin;
  font-size: 14px;
  font-weight: 300;
  max-width: 280px;
  max-height: 120px;
  padding-left: 5px;
  padding-top: 5px;
}
/* line 600, ../sass/screen.scss */
.second form input[type='submit'] {
  color: #363648;
  font-family: ColaReg;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  background: #e7e8ea;
  width: 85px;
  height: 27px;
  cursor: pointer;
  display: block;
  border-radius: 7px;
  -ms-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  float: right;
}
/* line 614, ../sass/screen.scss */
.second form input[type='submit']:hover {
  background: #ccced2;
}
＆＃13; 
<div class="container">
	<div class="upper">
		<img src="img/logo.png" alt="" />
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">iPad apps</a></li>
			<li><a href="">Demostrations</a></li>
			<li><a href="">Leopards media</a></li>
			<li><a href="">Connect us</a></li>
		</ul>
	</div>
		<div class="owl-carousel">
  		<div><div class="text"><p><span class="p-1">DUBLIN'S</span><br><span class="p-2">iPad <span class="p-3">Apps</span></span><br><span class="p-4">Free and paid apps<br>for your iPad</span></p>
				<a href="#"><input type="button" value="Read more"></a></div></div>
				<div><div class="text"><p><span class="p-1">DUBLIN'S</span><br><span class="p-2">iPad <span class="p-3">Apps</span></span><br><span class="p-4">Free and paid apps<br>for your iPad</span></p>
					<a href="#"><input type="button" value="Read more"></a></div></div>
					<div><div class="text"><p><span class="p-1">DUBLIN'S</span><br><span class="p-2">iPad <span class="p-3">Apps</span></span><br><span class="p-4">Free and paid apps<br>for your iPad</span></p>
						<a href="#"><input type="button" value="Read more"></a></div></div>
						<div><div class="text"><p><span class="p-1">DUBLIN'S</span><br><span class="p-2">iPad <span class="p-3">Apps</span></span><br><span class="p-4">Free and paid apps<br>for your iPad</span></p>
							<a href="#"><input type="button" value="Read more"></a></div></div></div>
		<div class="content">
			<a href="#"><div class="block1 block"><img src="img/block-1.png" alt=""><p>E Book Reader Pro</p></div></a>
			<a href="#"><div class="block2 block"><img src="img/block-2.png" alt=""><p>Image viewer pro</p></div></a>
			<a href="#"><div class="block3 block"><img src="img/block-3.png" alt=""><p>Media manager</p></div></a>
			<a href="#"><div class="block4 block"><img src="img/block-4.png" alt=""><p>Leo Entertainment</p></div></a>
		</div>
			<div class="text-box1 text-box"><img src="img/icon1.png" alt="" /><h3>Discover Apps</h3><p>Lorem Ipsum is simply dummy</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.</p></div>
			<div class="text-box2 text-box"><img src="img/icon2.png" alt="" /><h3>Browse Apps</h3><p>Lorem Ipsum is simply dummy</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.</p></div>
			<div class="text-box3 text-box"><img src="img/icon3.png" alt="" /><h3>Development</h3><p>Lorem Ipsum is simply dummy</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.</p></div>
		<div class="main-content">
			<h3>There are many variations of passages</h3>
			<img src="img/ipad2.png" alt="">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.</li>
			</ul>
			<input type="button" value="Read More">
			<input type="submit" value="Download">
		</div>
		<div class="main-content-2">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam obcaecati doloremque quaerat, quidem!</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, possimus.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil provident blanditiis odit, accusamus commodi aspernatur doloribus culpa.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem.</li>
			</ul>
		</div>
</div>
	<header>
		<div class="container">
			<div class="upper">
				<a class="twitter" href="#"><i class="icon-twitter"></i></a>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit in recusandae quaerat dolor mollitia,<br>
					 laborum veritatis hic, eveniet placeat reiciendis non inventore!</p>
				</div>
				<div class="first">
					<h3>Newsletter</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quae
						 ex delectus minima esse corrupti voluptatum repellendus quasi culpa nam.</p>
						 <input type="text" placeholder="Enter your email address.." class="extend-input">
						 <input type="button" name="name" value="Subscribe">
						 <div class="social">
							 <div class="twitter-2"><i class="icon-twitter"></i></div>
  						 <div class="facebook"><i class="icon-facebook"></i></div>
  						 <div class="linkedin"><i class="icon-linkedin"></i></div>
						 </div>
				</div>
				<div class="second">
					<form action="">
						<h3>Contact form</h3>
						<textarea name="name" rows="8" cols="45"></textarea>
						<input type="text" placeholder="Введите имя...">
						<input type="text" placeholder="Введите email...">
						<input type="text" placeholder="Тема письма...">
						<input type="submit" name="name" value="Submit">
					</form>
				</div>
		</div>
	</header>
＆＃13;
＆＃13;
＆＃13;

或http://jsfiddle.net/h62xp0ge/

2 个答案:

答案 0 :(得分：0)

您正在使用vw？

这为您提供了浏览器宽度。所以页脚的宽度是浏览器的宽度。

给它：

width: 100%;
height: auto; //or maybe 200px << something close to this.

答案 1 :(得分：0)

实际上我只需要将body的宽度设置为min-width：容器的宽度（1070px）。谢谢所有人试图帮助我！祝你好运！

相关问题
最新问题