刪除身體和頁腳之間的奇怪空間html

我是新來的HTML5和CSS3，甚至更多的flexbox。請幫助我刪除身體和頁腳之間的這種不需要的空間。刪除身體和頁腳之間的奇怪空間html

我環顧了這裏在stackoverflow和谷歌，但沒有任何工作。他們都建議檢查我的利潤率，我確實檢查了所有這些，但無濟於事。試圖調整邊緣，填充和邊界的大多數divs，但我仍然無法找到罪魁禍首。

鉻：

的index.html

<body> 
    <div> 
     <ul class="header flex-container"> 
      <li class="nav flex-item">About</li> 
      <li class="nav flex-item">Links</li> 
      <li class="nav flex-item">Contact</li> 
     </ul> 
    </div> 


    <div class="content flex-container"> 
     <div class="sidebar flex-item">Sidebar</div> 
     <div class="main flex-item"> 
     This is the content<br /> 
     This is the content<br /> 
     This is the content<br /> 
     This is the content<br /> 
     </div> 
     <div class="sidebar flex-item">Sidebar</div> 
    </div> 
</body> 
<footer>footer here</footer>

的style.css

body{ 
    margin: 0px; 
    font-family: sans-serif; 
} 

.flex-container{ 
    /* flexbox properties*/ 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 
} 

.flex-item{ 
    /*flexbox properties*/ 
    display: -webkit-flex; 
    align-items: center; 
    justify-content: center; 
} 

.header{ 
    height: 50px; 
    background-color: tomato; 
    margin: 0; 
    border-bottom: 3px solid rgba(0,0,0,0.3); 
} 

ul{ 
    justify-content: flex-end; 
} 

.nav{ 
    flex-direction: row; 
    margin: 2px; 
    padding: 0 10px 0 10px; 
    background-color: rgba(0,0,0,0.2); 
    color: white; 
} 

.content{ 
    height: 300px; 
    margin: 0; 
} 

.sidebar{ 
    background-color: grey; 
    flex: 1; 
}  

.main{ 
    background-color: lightgrey; 
    flex: 2; 
} 

footer{ 
    height: 50px; 
    border-top: 3px solid rgba(0,0,0,0.3); 
    background-color: tomato; 
}

編輯：這是我在Firefox中得到的。另外，如其中一條評論所述，將頁腳移動到身體標記內。

編輯2：我將我的代碼複製到Codepen並看到這些奇怪的字符。當我刪除它們時，它解決了我的問題。但看着我的編輯器（我已經試過Sublime和Notepad ++），沒有特殊字符！這真讓我抓狂。

來源

2017-10-09 reiallenramos

我不能重現該問題，有沒有我的空間。 https://jsfiddle.net/461gac7L/。這是否發生在特定的瀏覽器上？ –

'footer'應該在'body'標籤裏 –

@SuperUser試過，沒有工作 – reiallenramos

請試試這個。因爲在格主體和頁腳之間不必要的空格結束一些點字符是可見的，即（.............）

body{ 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
.flex-container{ 
 
    /* flexbox properties*/ 
 
    display: -webkit-flex; 
 
    -webkit-flex-direction: row; 
 
} 
 

 
.flex-item{ 
 
    /*flexbox properties*/ 
 
    display: -webkit-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.header{ 
 
    height: 50px; 
 
    background-color: tomato; 
 
    margin: 0; 
 
    border-bottom: 3px solid rgba(0,0,0,0.3); 
 
} 
 

 
ul{ 
 
    justify-content: flex-end; 
 
} 
 

 
.nav{ 
 
    flex-direction: row; 
 
    margin: 2px; 
 
    padding: 0 10px 0 10px; 
 
    background-color: rgba(0,0,0,0.2); 
 
    color: white; 
 
} 
 

 
.content{ 
 
    height: 300px; 
 
    margin: 0; 
 
} 
 

 
.sidebar{ 
 
    background-color: grey; 
 
    flex: 1; 
 
}  
 

 
.main{ 
 
    background-color: lightgrey; 
 
    flex: 2; 
 
} 
 

 
footer{ 
 
    height: 50px; 
 
    border-top: 3px solid rgba(0,0,0,0.3); 
 
    background-color: tomato; 
 
}

<body> 
 
    <div> 
 
     <ul class="header flex-container"> 
 
      <li class="nav flex-item">About</li> 
 
      <li class="nav flex-item">Links</li> 
 
      <li class="nav flex-item">Contact</li> 
 
     </ul> 
 
    </div> 
 

 

 
    <div class="content flex-container"> 
 
     <div class="sidebar flex-item">Sidebar</div> 
 
     <div class="main flex-item"> 
 
     This is the content<br /> 
 
     This is the content<br /> 
 
     This is the content<br /> 
 
     This is the content<br /> 
 
     </div> 
 
     <div class="sidebar flex-item">Sidebar</div> 
 
    </div> 
 
</body> 
 
<footer>footer here</footer>

來源

2017-10-09 07:11:52

您好，非常感謝！雖然，你能指出我改變了哪一部分嗎？我找不到它。 – reiallenramos

我接受了你的回答。我意識到你沒有改變代碼中的任何東西。你知道爲什麼有不需要的字符？這是它第一次發生，我一直在用不同的語言使用SublimeText。 – reiallenramos

@reiallenramos我已經移除了在代碼片段中可見的doted字符。錯誤地輸入了額外的字符，這在崇高中是不可見的，因爲你還沒有安裝插件。爲此請按此鏈接https://github.com/TuureKaunisto/highlight-dodgy-chars –

這裏是與你的問題HTML Look into this screenshot problem is with you html try using footer inside your body tag

Here is the working fiddle

<body> 
    <div> 
     <ul class="header flex-container"> 
      <li class="nav flex-item">About</li> 
      <li class="nav flex-item">Links</li> 
      <li class="nav flex-item">Contact</li> 
     </ul> 
    </div> 


    <div class="content flex-container"> 
     <div class="sidebar flex-item">Sidebar</div> 
     <div class="main flex-item"> 
     This is the content<br /> 
     This is the content<br /> 
     This is the content<br /> 
     This is the content<br /> 
     </div> 
     <div class="sidebar flex-item">Sidebar</div> 
    </div> 
    <footer>footer here</footer> 
</body>

來源

2017-10-09 07:29:21 LSKhan

刪除身體和頁腳之間的奇怪空間html

回答

相關問題