白色空间在屏幕右侧 [英] White space to the right of the screen
本文介绍了白色空间在屏幕右侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助我的网站，因为它似乎在我的页面的右边有一个相当大的空间。一切都适合页面，除非你向右滚动你的部分在我的网站之外，所以所有想做的是Ristrict的浏览器滚动右或摆脱那个空间，因为我代码如下所示：
html {width：100％;高度：100％; margin：0px auto;} body {background-color：white; width：100％; height：100％;}＃Header {background-color：＃2c3e50;宽度：105％; height：105px;保证金：-1％-2.5％; position：relative;}＃Title1 {width：105％; height：75px;背景：＃2c3e50; text-align：bottom; font-size：250％; font-family：Helvetica;颜色：白色;保证金：0.4％1％; position：fixed;}＃nav_bar1 {font-size：175％; margin：-60px 45％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar1：hover {color：＃18bc9c;}＃nav_bar2 {font-size：175％; margin：-60px 67％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar2：hover {color：＃18bc9c;}＃nav_bar3 {font-size：175％; margin：-60px 80％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar3：hover {color：＃18bc9c;}＃Bootstrap {background-color：＃18bc9c;宽度：105％; height：600px; margin：-2.5％-2.5％;}＃Title2 {font-size：320％; font-family：Helvetica;颜色：白色; margin：0％25％;}＃img {margin：4％45％;}＃Start_bootstrap {width：100％;保证金：0％43％; font-family：Helvetica;}＃Description {width：100％;保证金：1％41％; font-family：Helvetica;}＃Portfolio {font-size：270％; font-family：Helvetica;颜色：＃2c3e50; margin：280px auto;}＃about {background-color：＃18bc9c;宽度：105％; height：500px; margin：795px -2.5％;}＃about_title {margin：-1200px auto; font-size：270％; font-family：Helvetica; color：＃2c3e50;}＃About_Me1 {width：40％; margin：1250px 30％; font-family：Helvetica; color：＃2c3e50;}＃Vertical_fix {width：17.5％;保证金：-161.5％55％; font-family：Helvetica; color：＃2c3e50;}＃Vertical_fix2 {margin：-000px -300％; font-family：Helvetica;颜色：＃2c3e50; font-size：270％;}＃Contact_Header {text-align：center; font-size：270％;}＃Contact_Info {width：50％; margin：-1400px 25％; font-family：Helvetica;颜色：＃2c3e50; position：absolute; bottom：0;}。center {float：center; text-align：center;}。left {float：left; text-align：left;}。right {float：right; text-align：right;}。footer {position：absolute; bottom：0;宽度：102.5％; height：60px; background-color：＃18bc9c;保证金：-110％-0.85％; font-size：75％;}
<！DOCTYPE html>< html lang =en>< head> < meta charset =UTF-8> < title> Bootstrap< / title> < link rel =stylesheethref =css.css>< / head>< body> < div id =Header> < div id =Title1>。@ BOOTSTRAP< / div> < / div> < div class =rightid =nav_bar1> EXPERIENCE< / div> < div class =rightid =nav_bar2> ABOUT< / div> < div class =rightid =nav_bar3> CONTACT< / div> < div id =Bootstrap> < img src =profile.pngclass =centerid =img> < h1 id =Start_bootstrap> START BOOTSTRAP< / h1> < p id =Description>网页开发人员 - 平面设计师 - 用户体验设计师< / p> < div class =centerid =Portfolio> < p>我的体验是...< / p> < img src =C：\Users\ben\Pictures\inknpixel.png> < / div> < / div> < div id =about> < / div> < div class =centerid =about_title>多一点...< / div> < p id =About_Me1> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Donec bibendum arcu in massa dapibus，in vehicula mauris consequat。 Suspendisse ac mauris quis lorem commodo scelerisque。 Duis in commodo nisl，vel volutpat ipsum。 Pellentesque placerat lobortis faucibus。 Nulla interdum quam a risus，aliquam porta。 Mauris pulvinar，ante a vulputate rutrum，lorem diam blandit est，non porta quam enim eu lectus。 Maecenas nulla mi，feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 < / p> < p id =Vertical_fix> aliquam< / p> < / div> < div class =centerid =Contact_Info> < / p>你可以在...找到我< p style =color：＃2c3e50; font-size：270％; font-family：Helvetica; text-align：60％ < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Donec bibendum feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam lectus。 Maecenas nulla mi，feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 Praesent vehicula mollis tellus< / p> < / div> < div class =footer>< / div>< / body>< / html>
>
解决方案
问题是
#Start_bootstrap {
margin：0％43％;
width：100％;
}
#Description {
margin：1％41％;
width：100％;
}
基本上，你设置他们的宽度tp 100％的父，
如果你想集中，最好使用
#Start_bootstrap，#Description {
text-align：center;
}
html {width：100 ％;高度：100％; margin：0px auto;} body {background-color：white; width：100％; height：100％;}＃Header {background-color：＃2c3e50;宽度：105％; height：105px;保证金：-1％-2.5％; position：relative;}＃Title1 {width：105％; height：75px;背景：＃2c3e50; text-align：bottom; font-size：250％; font-family：Helvetica;颜色：白色;保证金：0.4％1％; position：fixed;}＃nav_bar1 {font-size：175％; margin：-60px 45％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar1：hover {color：＃18bc9c;}＃nav_bar2 {font-size：175％; margin：-60px 67％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar2：hover {color：＃18bc9c;}＃nav_bar3 {font-size：175％; margin：-60px 80％;颜色：白色; font-family：Helvetica; position：fixed;}＃nav_bar3：hover {color：＃18bc9c;}＃Bootstrap {background-color：＃18bc9c;宽度：105％; height：600px; margin：-2.5％-2.5％;}＃Title2 {font-size：320％; font-family：Helvetica;颜色：白色; margin：0％25％;}＃img {margin：4％45％;}＃Start_bootstrap，#Description {text-align：center; font-family：Helvetica;}＃Portfolio {font-size：270％; font-family：Helvetica;颜色：＃2c3e50; margin：280px auto;}＃about {background-color：＃18bc9c;宽度：105％; height：500px; margin：795px -2.5％;}＃about_title {margin：-1200px auto; font-size：270％; font-family：Helvetica; color：＃2c3e50;}＃About_Me1 {width：40％; margin：1250px 30％; font-family：Helvetica; color：＃2c3e50;}＃Vertical_fix {width：17.5％;保证金：-161.5％55％; font-family：Helvetica; color：＃2c3e50;}＃Vertical_fix2 {margin：-000px -300％; font-family：Helvetica;颜色：＃2c3e50; font-size：270％;}＃Contact_Header {text-align：center; font-size：270％;}＃Contact_Info {width：50％; margin：-1400px 25％; font-family：Helvetica;颜色：＃2c3e50; position：absolute; bottom：0;}。center {float：center; text-align：center;}。left {float：left; text-align：left;}。right {float：right; text-align：right;}。footer {position：absolute; bottom：0;宽度：102.5％; height：60px; background-color：＃18bc9c;保证金：-110％-0.85％; font-size：75％;}
<！DOCTYPE html>< html lang =en>< head> < meta charset =UTF-8> < title> Bootstrap< / title> < link rel =stylesheethref =css.css>< / head>< body> < div id =Header> < div id =Title1>。@ BOOTSTRAP< / div> < / div> < div class =rightid =nav_bar1> EXPERIENCE< / div> < div class =rightid =nav_bar2>关于< / div> < div class =rightid =nav_bar3> CONTACT< / div> < div id =Bootstrap> < img src =profile.pngclass =centerid =img> < h1 id =Start_bootstrap> START BOOTSTRAP< / h1> < p id =Description>网页开发人员 - 平面设计师 - 用户体验设计师< / p> < div class =centerid =Portfolio> < p>我的体验是...< / p> < img src =C：\Users\ben\Pictures\inknpixel.png> < / div> < / div> < div id =about> < / div> < div class =centerid =about_title>多一点...< / div> < p id =About_Me1> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Donec bibendum arcu in massa dapibus，in vehicula mauris consequat。 Suspendisse ac mauris quis lorem commodo scelerisque。 Duis in commodo nisl，vel volutpat ipsum。 Pellentesque placerat lobortis faucibus。 Nulla interdum quam a risus，aliquam porta。 Mauris pulvinar，ante a vulputate rutrum，lorem diam blandit est，non porta quam enim eu lectus。 Maecenas nulla mi，feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 < / p> < p id =Vertical_fix> aliquam< / p> < / div> < div class =centerid =Contact_Info> < / p>你可以在...找到我< p style =color：＃2c3e50; font-size：270％; font-family：Helvetica; text-align：60％ < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Donec bibendum feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam lectus。 Maecenas nulla mi，feugiat vitae tortor a，fringilla aliquam nunc。 Vestibulum ornare dignissim est uta porta。 Etiam placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida。 Fusce quis rhoncus dui。 Praesent vehicula mollis tellus< / p> < / div> < div class =footer>< / div>< / body>< / html>
>
I need help with my site as it seems to have a rather large space of white to the right of my page. Everything fits into the page except if you were to scroll right you'd the part outside of my website, so all a want to do is ristrict the viewer from scrolling right or get rid of that space as I had done when you could scroll further down than what I built, The code is as shown below:
html {
width: 100%;
height: 100%;
margin: 0px auto;
}
body {
background-color: white;
width: 100%;
height: 100%;
}
#Header {
background-color: #2c3e50;
width: 105%;
height: 105px;
margin: -1% -2.5%;
position: relative;
}
#Title1 {
width: 105%;
height: 75px;
background: #2c3e50;
text-align: bottom;
font-size: 250%;
font-family: Helvetica;
color: white;
margin: 0.4% 1%;
position: fixed;
}
#nav_bar1 {
font-size: 175%;
margin: -60px 45%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar1:hover {
color: #18bc9c;
}
#nav_bar2 {
font-size: 175%;
margin: -60px 67%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar2:hover {
color: #18bc9c;
}
#nav_bar3 {
font-size: 175%;
margin: -60px 80%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar3:hover {
color: #18bc9c;
}
#Bootstrap {
background-color: #18bc9c;
width: 105%;
height: 600px;
margin: -2.5% -2.5%;
}
#Title2 {
font-size: 320%;
font-family: Helvetica;
color: white;
margin: 0% 25%;
}
#img {
margin: 4% 45%;
}
#Start_bootstrap {
width: 100%;
margin: 0% 43%;
font-family: Helvetica;
}
#Description {
width: 100%;
margin: 1% 41%;
font-family: Helvetica;
}
#Portfolio {
font-size: 270%;
font-family: Helvetica;
color: #2c3e50;
margin: 280px auto;
}
#about {
background-color: #18bc9c;
width: 105%;
height: 500px;
margin: 795px -2.5%;
}
#about_title {
margin: -1200px auto;
font-size: 270%;
font-family: Helvetica;
color: #2c3e50;
}
#About_Me1 {
width: 40%;
margin: 1250px 30%;
font-family: Helvetica;
color: #2c3e50;
}
#Vertical_fix {
width: 17.5%;
margin: -161.5% 55%;
font-family: Helvetica;
color: #2c3e50;
}
#Vertical_fix2 {
margin: -000px -300%;
font-family: Helvetica;
color: #2c3e50;
font-size: 270%;
}
#Contact_Header {
text-align: center;
font-size: 270%;
}
#Contact_Info {
width: 50%;
margin: -1400px 25%;
font-family: Helvetica;
color: #2c3e50;
position: absolute;
bottom: 0;
}
.center {
float: center;
text-align: center;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.footer {
position: absolute;
bottom: 0;
width: 102.5%;
height: 60px;
background-color: #18bc9c;
margin: -110% -0.85%;
font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="Header">
<div id="Title1">.@BOOTSTRAP</div>
</div>
<div class="right" id="nav_bar1">EXPERIENCE</div>
<div class="right" id="nav_bar2">ABOUT</div>
<div class="right" id="nav_bar3">CONTACT</div>
<div id="Bootstrap">
<img src="profile.png" class="center" id="img">
<h1 id="Start_bootstrap">START BOOTSTRAP</h1>
<p id="Description">Web Developer - Graphic Artist - User Experience Designer</p>
<div class="center" id="Portfolio">
<p>My Experiences are..</p>
<img src="C:\Users\ben\Pictures\inknpixel.png">
</div>
</div>
<div id="about">
</div>
<div class="center" id="about_title">A bit more...</div>
<p id="About_Me1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum arcu in massa dapibus, in vehicula mauris consequat. Suspendisse ac mauris quis lorem commodo scelerisque. Duis in commodo nisl, vel volutpat ipsum. Pellentesque placerat lobortis
faucibus. Nulla interdum quam a risus, aliquam porta. Mauris pulvinar, ante a vulputate rutrum, lorem diam blandit est, non porta quam enim eu lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est
ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus.</p>
<p id="Vertical_fix">aliquam</p>
</div>
<div class="center" id="Contact_Info">
<p style="color: #2c3e50; font-size: 270%; font-family: Helvetica; text-align: 60%">You can find me at...</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam
nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus
</p>
</div>
<div class="footer"></div>
</body>
</html>
解决方案
The problem is
#Start_bootstrap {
margin: 0% 43%;
width: 100%;
}
#Description {
margin: 1% 41%;
width: 100%;
}
Basically, you set their width tp 100% of their parent, and you push them a lot to the right.
If you want to center, better use
#Start_bootstrap, #Description {
text-align: center;
}
html {
width: 100%;
height: 100%;
margin: 0px auto;
}
body {
background-color: white;
width: 100%;
height: 100%;
}
#Header {
background-color: #2c3e50;
width: 105%;
height: 105px;
margin: -1% -2.5%;
position: relative;
}
#Title1 {
width: 105%;
height: 75px;
background: #2c3e50;
text-align: bottom;
font-size: 250%;
font-family: Helvetica;
color: white;
margin: 0.4% 1%;
position: fixed;
}
#nav_bar1 {
font-size: 175%;
margin: -60px 45%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar1:hover {
color: #18bc9c;
}
#nav_bar2 {
font-size: 175%;
margin: -60px 67%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar2:hover {
color: #18bc9c;
}
#nav_bar3 {
font-size: 175%;
margin: -60px 80%;
color: white;
font-family: Helvetica;
position: fixed;
}
#nav_bar3:hover {
color: #18bc9c;
}
#Bootstrap {
background-color: #18bc9c;
width: 105%;
height: 600px;
margin: -2.5% -2.5%;
}
#Title2 {
font-size: 320%;
font-family: Helvetica;
color: white;
margin: 0% 25%;
}
#img {
margin: 4% 45%;
}
#Start_bootstrap, #Description {
text-align: center;
font-family: Helvetica;
}
#Portfolio {
font-size: 270%;
font-family: Helvetica;
color: #2c3e50;
margin: 280px auto;
}
#about {
background-color: #18bc9c;
width: 105%;
height: 500px;
margin: 795px -2.5%;
}
#about_title {
margin: -1200px auto;
font-size: 270%;
font-family: Helvetica;
color: #2c3e50;
}
#About_Me1 {
width: 40%;
margin: 1250px 30%;
font-family: Helvetica;
color: #2c3e50;
}
#Vertical_fix {
width: 17.5%;
margin: -161.5% 55%;
font-family: Helvetica;
color: #2c3e50;
}
#Vertical_fix2 {
margin: -000px -300%;
font-family: Helvetica;
color: #2c3e50;
font-size: 270%;
}
#Contact_Header {
text-align: center;
font-size: 270%;
}
#Contact_Info {
width: 50%;
margin: -1400px 25%;
font-family: Helvetica;
color: #2c3e50;
position: absolute;
bottom: 0;
}
.center {
float: center;
text-align: center;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.footer {
position: absolute;
bottom: 0;
width: 102.5%;
height: 60px;
background-color: #18bc9c;
margin: -110% -0.85%;
font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="Header">
<div id="Title1">.@BOOTSTRAP</div>
</div>
<div class="right" id="nav_bar1">EXPERIENCE</div>
<div class="right" id="nav_bar2">ABOUT</div>
<div class="right" id="nav_bar3">CONTACT</div>
<div id="Bootstrap">
<img src="profile.png" class="center" id="img">
<h1 id="Start_bootstrap">START BOOTSTRAP</h1>
<p id="Description">Web Developer - Graphic Artist - User Experience Designer</p>
<div class="center" id="Portfolio">
<p>My Experiences are..</p>
<img src="C:\Users\ben\Pictures\inknpixel.png">
</div>
</div>
<div id="about">
</div>
<div class="center" id="about_title">A bit more...</div>
<p id="About_Me1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum arcu in massa dapibus, in vehicula mauris consequat. Suspendisse ac mauris quis lorem commodo scelerisque. Duis in commodo nisl, vel volutpat ipsum. Pellentesque placerat lobortis
faucibus. Nulla interdum quam a risus, aliquam porta. Mauris pulvinar, ante a vulputate rutrum, lorem diam blandit est, non porta quam enim eu lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est
ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus.</p>
<p id="Vertical_fix">aliquam</p>
</div>
<div class="center" id="Contact_Info">
<p style="color: #2c3e50; font-size: 270%; font-family: Helvetica; text-align: 60%">You can find me at...</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum feugiat vitae tortor a, fringilla aliquam nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam lectus. Maecenas nulla mi, feugiat vitae tortor a, fringilla aliquam
nunc. Vestibulum ornare dignissim est ut porta. Etiam placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus placerat aliquam ipsum nec gravida. Fusce quis rhoncus dui. Praesent vehicula mollis tellus
</p>
</div>
<div class="footer"></div>
</body>
</html>
这篇关于白色空间在屏幕右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
