站点一侧的额外空白区域

时间：2016-02-07 22:35:37

标签： html css

＆＃13;
＆＃13; 
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  left: 39vw;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
＆＃13; 
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:jamestrombo@gmail.com">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>
＆＃13;
＆＃13;
＆＃13;

为什么右侧有额外的空间？ 我已将边距和填充设置为0。

2 个答案:

答案 0 :(得分：0)

这是因为

h1 {
  ...
  left: 39vw;
  ...
}

它从

继承了100vw 
.place {
  height: 100vh;
  width: 100vw;
}

所以你的页面宽度是139vw，它可以为你提供额外的填充。 删除它可以解决您的问题：

＆＃13;
＆＃13; 
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
＆＃13; 
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:jamestrombo@gmail.com">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需几步即可解决此问题。

1）更改lmao课程中的以下属性：

position: absolute;
right: 0;

2）在h1标记中删除它：

left: 39vw;

3）使用以下内容取消width: 100vw课程的place 

width: 100%;

这些更改会将侧边栏放在最右边，没有任何空格。

Demo

完整代码

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100%;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: absolute;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: 0;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:jamestrombo@gmail.com">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>

相关问题
最新问题