如何刪除網頁上的空白區域？
[英]How do I remove empty white space on my webpage?
問題描述
我正在嘗試制作一個網站，但遇到了無法刪除一大塊空白的問題。
我使用圖像作為背景，並希望主要文本和徽標位於背景圖像的中間。
我試過使用overflow-x: hidden; 以及弄亂 css 文件中不同元素的margin 、 padding 、 width和height值，但是，我無法讓它工作。 我試圖將寬度和高度設置得更大，但它不會擴展到任何尺寸的屏幕。
我以前沒有遇到過這個問題，不知道為什么現在會發生。
我的代碼：
h1 { font-family: "times new roman"; font-size: 2.5em; color: rgb(100, 181, 204); } #box { border-width: 0.25em; border-style: solid; border-color: black; width: 50em; margin-left: auto; margin-right: auto; padding: 1em; font-family: sans-serif; color: black; background: rgb(135, 129, 140); } div { margin: 0 auto; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } p { font-size: 1.2em; } .centertext { text-align: center; width: 60%; margin-left: auto; margin-right: auto; } #logo { margin-top: .5em; margin-left: 13.7em; margin-right: auto; padding: 0em 0em 0em 0em; } #background { position: absolute; z-index: -1; left: -40px; top: -88px; width: 100%; height: 100%; padding: 0 0 0 0; margin: 0 auto; } footer { display: block; background: rgb(81, 40, 117); padding: 0.1em; border-width: thin; border-style: solid; border-color: black; clear: right; } #mainnav { border-width: .1em; border-style: solid; border-color: black; width: 40em; padding-left: 0em; margin-left: auto; margin-right: auto; text-align: center; background: rgb(81, 40, 117); } #mainnav a:link { color: white; } #mainnav a:visited { color: blue; } #mainnav a:hover { color: black; } #mainnav a:active { color: light gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Christie Matterns Portfolio website</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <img id="logo" src="images/logo.jpg" width="840" height="200" /> <div id="box"> <div> <p id="mainnav"> <a href="index.html">Home</a> | <a href="who.html">Who am I?</a> | <a href="question.html">Questionair</a> | </p> </div> <h1 class="centertext">My Portfolio</h1> <p class="centertext"> Hello, My name is Christie Mattern, I am a web designer! </p> <p> I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress. <footer> <p class="centertext"> Christie Mattern </p> </footer> </div> </body> <img id="background" src="images/background.jpg" /> </html>
2 個解決方案
解決方案1
3 已采納 2019-11-28 03:48:14
發生這種情況是因為您的背景圖片在您的<body>標簽之外。
有更好、更可維護的方法來做你想做的事情，沒有所有的“黑客”。
我會嘗試修改您的一些代碼並將其注釋掉，以便您可以更多地理解它。
使用圖像作為背景
當您想將圖像用作背景時，請將其用作CSS background-image 屬性。 在某些情況下，使用您嘗試使用它的方式會更好，但一般來說，對於這種特定情況， background-image更合適。
.myElement {
background-image: url("paper.jpg");
}
如果你想讓你的文本集中在一個有背景的元素內，用一個新元素包裹你的內容，將內容插入其中，然后給這個新元素賦予background-image屬性。
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
你的代碼應該看起來像這樣：
/* New Code Added */ .newElement { background-image: url(http://lorempixel.com/400/400/abstract/); background-repeat: no-repeat; /* Makes background nto repeat */ background-size: cover; /* Sets background size as a cover */ background-color: #cccccc; padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */ } /* Old Code. Check comments */ h1 { font-family: "times new roman"; font-size: 2.5em; color: rgb(100, 181, 204); } #box { border-width: 0.25em; border-style: solid; border-color: black; /* width: 50em; No need for this being added */ margin-left: auto; margin-right: auto; padding: 1em; font-family: sans-serif; color: black; background: rgb(135, 129, 140); } div { margin: 0 auto; } html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } p { font-size: 1.2em; } .centertext { text-align: center; width: 60%; margin-left: auto; margin-right: auto; } #logo { width: 100%; max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */ height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */ margin: 0 auto; /* Centers image horizontally */ display: block; /* Needed for the horizontal center */ } footer { display: block; background: rgb(81, 40, 117); padding: 0.1em; border-width: thin; border-style: solid; border-color: black; clear: right; } #mainnav { border-width: .1em; border-style: solid; border-color: black; /* width: 40em; No need for this being added */ padding-left: 0em; margin-left: auto; margin-right: auto; text-align: center; background: rgb(81, 40, 117); } #mainnav a:link { color: white; } #mainnav a:visited { color: blue; } #mainnav a:hover { color: black; } #mainnav a:active { color: light gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Christie Matterns Portfolio website</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div class="newElement"> <div class="content-wrapper"> <img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" /> </div> </div> <div id="box"> <div> <p id="mainnav"> <a href="index.html">Home</a> | <a href="who.html">Who am I?</a> | <a href="question.html">Questionair</a> | </p> </div> <h1 class="centertext">My Portfolio</h1> <p class="centertext"> Hello, My name is Christie Mattern, I am a web designer! </p> <p> I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress. <footer> <p class="centertext"> Christie Mattern </p> </footer> </div> </body> </html>
如果您想要所有網站的背景圖片，只需將 background-image 屬性移至
body標簽即可。body { background-image: url("paper.jpg"); }刪除您添加到
box和mainnav元素的寬度，內容甚至變得具有響應性，因此它已准備好用於移動設備。
解決方案2
1 2019-11-28 02:13:09
不確定我是否 100% 理解您的問題，但如果您試圖讓背景圖像覆蓋整個文檔，請嘗試使用 css 屬性將其包裹在整個文檔中。
示例：刪除您擁有的 img 標簽。
<body id="background">
<!-- rest of your code here -->
</body>
然后在 css 中添加 background-image 以在 id 背景下引用您的 img ：
#background {
background-image: url("images/background.jpg");
}
如何刪除僅在移動視圖中的 ThreeJS 網頁上彈出的白色邊框？
[英]How do I remove a white border that only pops on my ThreeJS webpage in mobile view?
如何刪除僅在移動設備上顯示的網頁底部的空白？
[英]How do I remove white space at the bottom of my web page that only appears on mobile?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.