如何使div適合水平頁面的其餘部分？

你好我有問題的div我嘗試了一切，但我不能... 我想覆蓋所有網站（100vh和100％寬度）與白色，沒有居中的圖像和動畫背景，你會明白，當你看到現場： http://nevisu.co.uk/neviftp/如何使div適合水平頁面的其餘部分？

這是我的問題： http://nevisu.co.uk/neviftp/help.jpg

HTML

<div id="top_white"></div> 

    <div id="mid_white"> 
     <div id="left_white"></div>  
     <div id="transparent_logo"><img src="images/symbol_transparent.png"></div> 
     <div id="right_white"></div> 
    </div> 

    <div id="bot_white"></div> 
</div> 
</div> 
<div id="clr"></div> 
<div id="black_container"></div>

CSS

body { 
margin:0px auto; 
font-family: 'Open Sans', sans-serif; 
background:#000; 
width:100%; 
height:100%; 
} 

img { 
max-width: 100%; 
max-height: 100%; 
} 

#top_white { 
display: block; 
float:left; 
width:100%; 
height:10vh; 
background:#FFF; 
z-index:99; 
} 

#mid_white { 
display: inline-block; 
float:left; 
width:100%; 
max-height:60vh; 
z-index:99; 
} 

#left_white { 
display: inline-block; 
float:left; 
height:60vh; 
width:33vw; 
max-height: 640px; 
background:#FFF; 
} 

#transparent_logo { 
display: inline-block; 
float:left; 
/*background:url('../images/symbol_transparent.png') center center no-repeat;*/ 
height:60vh; 
} 

#right_white { 
margin:0px auto; 
position:absolute; 
display: inline-block; 
float:left; 
width:300px; 
height:60vh; 
right:0px; 
max-height: 640px; 
background:#fff; 
} 

#bot_white { 
position: absolute; 
float:left; 
width:100%; 
height:30vh; 
bottom: 0px; 
background:#FFF; 
z-index:99; 
} 

#clr { 
clear: both; 
} 


#white_container { 
float:left;width:100%;height:100vh;position: absolute; 
} 

#black_container { 
float:left;background:#000; width:100%;height:4000px; 
}

來源

2014-12-10 nevisu

所有你需要做的就是包裹你的圖像。

http://jsfiddle.net/0oxqzbfe/

<div class="wrapper"> 
    <div class="imgWrapper"> 
     <img src="https://placekitten.com/g/200/200"/> 
    </div> 
</div> 


.wrapper { 
width:100%; 
} 
img { 
width:100%; 
} 
.imgWrapper { 
width:50%; 
}

如示例中看到的圖像將總是體的50％。即使圖像源文件是200px x 200px

您應該使用此結構。

<body 100%width> 
    <div>white background width:20%</div> 
    <div>center logo wrapper 
     width:60%; 
     overflow:hidden; 
      <img>transparent 
      <img>rotating 
    </div> 
     white background width:20% 
    <div> 
</body>

來源

2014-12-10 22:31:26 aahhaa

是的，你有權:)我試試這個明天，謝謝 – nevisu 2014-12-10 22:56:32

如何使div適合水平頁面的其餘部分？

回答

相關問題