CSS百分比而不是像素的高度

我目前正在使用響應式設計的網站（以及我正在嘗試）。我一直在編碼HTML和CSS很長一段時間，但我不熟悉百分比的高度和寬度的使用。CSS百分比而不是像素的高度

我的網站設計非常簡單，它實際上是我個人簡歷，投資組合等個人網站。它只是一個頁面的網站。

設計看起來像這樣

enter image description here

在彩色的每個塊有一個背景圖像中的白線在它的文本之間的裝配。

我的問題是：我從來沒有使用過百分比（我希望我的網站能夠響應）。

所以我已經做了我的塊，但在CSS中，我被困在高處。

但圖像沒有出現，它沒有高度！你能幫我嗎，我試過使用最小高度等，但我從來沒有得到我想要的。

非常感謝！

的CSS：

body 
{ 
    background-color: #000000; 
    margin: 0px auto; 
} 

#page 
{ 
    margin: 0px auto; 
    font-family: Myriad Pro, serif; 
    font-weight: normal; 
    background-color: white; 
} 

.wrapper-intro 
{ 
    background-color: green; 
    height: 500px; 
} 

#intro 
{ 
    background: url(images/space.png); 
    width: 80%; 
    height: 100%; 
    margin-left: 10%; 
    margin-right: 10%; 
    border: 1px solid black; 
    background-size: 100% 100%; 
}

的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style.css" /> 
<title>Site</title> 
</head> 

<body> 
     <div id="page"> 
     <div class="wrapper-intro"> 
      <section id="intro"> 
       <header> 
       Title 
       </header> 

       <nav> 

       </nav> 
      </section> 
     </div> 
     </div> 

     <section id="about"> 
      <article> 
      </article> 
     </section> 

     <section id="portfolio"> 
      <article> 
      </article> 
     </section> 

     <section id="cv"> 
      <article> 
      </article> 
     </section> 

     <section id="contact"> 
      <article> 
      </article> 
     </section> 

</body> 

</html>

來源

2014-02-08 user3286183

你要記住，當你使用％的CSS，父容器需要有一組高度/寬度。你正在做的正確的事是說你想#intro有100％的高度沒有任何東西 - 這仍然是沒有的（因爲父元素沒有高度）。讓你的主容器甚至身體佔據100％的高度和寬度，你應該很好。

嘗試一下本作介紹

#intro 
{ 
    background: url(images/space.png); 
    width: 80%; 
    height: 100%; 
    margin-left: 10%; 
    margin-right: 10%; 
    border: 1px solid black; 
    background-size: 100% 100%; 
}

好吧檢查這個代碼了。我認爲它更接近你正在尋找的東西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Site</title> 
<style> 

html, body 
{ 
    background-color: red; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#page 
{ 
    margin: 0px auto; 
    font-family: Myriad Pro, serif; 
    font-weight: normal; 
    height: 100%; 
    width: 100%; 
} 

.wrapper 
{ 
    background-color: green; 
    height: 32%; 
    width: 85%; 
    margin: 0px auto; 
} 

#intro, #about, #portfolio 
{ 
    background: url(http://cdn.sneakhype.com/wp-content/uploads/2009/01/960x500_51-30_gunmetal.jpg); 
    width: 80%; 
    height: 100%; 
    margin-left: 10%; 
    margin-right: 10%; 
    border: 1px solid black; 
    background-size: 100% 100%; 
} 

</style> 
</head> 

<body> 
     <div id="page"> 
     <div class="wrapper"> 
      <section id="intro"> 
       <header> 
       Intro 
       </header> 

       <nav> 

       </nav> 
      </section> 
     </div> 
     <div class="wrapper"> 
      <section id="about"> 
       <header> 
       About 
       </header> 

       <nav> 

       </nav> 
      </section> 
     </div> 
     <div class="wrapper"> 
      <section id="portfolio"> 
       <header> 
       Portfolio 
       </header> 

       <nav> 

       </nav> 
      </section> 
     </div> 
     </div> 

</body> 

</html>

來源

2014-02-08 03:13:38

噢好吧。所以我的圖片高度爲500px，「intro」在一個包裝中。所以我把包裝的高度設置爲500px，並將其介紹爲100％。現在圖像出現了，但是當我改變窗口的大小時，它不會變小，這就是我真正想要的。你可以幫我嗎？感謝您的回覆:) – user3286183

你能粘貼一個鏈接或顯示更多的代碼嗎？你也可以避免在使用CSS時使用高度。嘗試設置圖像的寬度而不是高度。這應該讓它變得流暢。 –

我用我的代碼編輯了我的主題！關於高度：但是當我沒有放置高度時，我的背景圖像不會出現：/我的html看起來現在很空，我剛開始，但我用這個塊沒有高度的東西Stucked！ – user3286183

CSS百分比而不是像素的高度

回答

相關問題