身高的比例不工作

，你可以在此的jsfiddle http://jsfiddle.net/Grek/yLrC8/看到，我試圖以設定的70％的高度對我的文章DIV有DIV的高度總是等於用戶的瀏覽器大小的70％（但是最小高度爲400px），但對於某些拉風不起作用。你知道爲什麼嗎？由於身高的比例不工作

<div class="menu"> 
     <div class="inner"> <a href="www.dfdsfdsfs.com/index.html" class="logo">Gregory</a> 
    <ul> 
      <li > <a href="www.dfdsfdsfs.com">Category 1</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 2</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 3</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 4</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Category 5</a> </li> 
      <li class="selected"> <a href="www.dfdsfdsfs.com/">Category 6</a> </li> 
      <li > <a href="www.dfdsfdsfs.com">Contact</a> <span class="pipe"></span> </li> 
     </ul> 
    <div class="social"> 
      <div class="fb-like" data-href="http://www.123.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> 
     </div> 
    </div> 
    </div> 
<div id="quote"> 
     <blockquote> 
    <p>"Nos soutenons depuis la début"</p> 
    <cite>Innovation</cite> </blockquote> 
     <blockquote> 
    <p>"Qualité exceptionnelle"</p> 
    <cite>Feologiste</cite> </blockquote> 
    </div> 

<div class="news"> 

</div> 
<div class="linksicons"> sds </div> 
<div class="article content"> 
    <h1>Biography</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side."> 
    <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75"> 
</a><h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
    <p><strong>LOREM IPSUM</strong></p> 
      <h3>Tel. +123 456.789 - E-mail: [email protected]</h3> 
    </div> 


    </div> 

<div class="footer"> 
<a href="#_" class="lien_hot_news">Prochains événements</a> 

    </div>

CSS：

/* Reset 
/* -------------------------------------------- */ 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
b, strong { 
    font-weight: bold; 
} 
em { 
    font-style: italic; 
} 
/* Font family reference 
/* -------------------------------------------- */ 

/* 

font-family:'FuturaW01-LightOblique'; 
font-family:'Futura W01 Book'; 
font-family:'Futura W01 Book Oblique'; 
font-family:'Futura W01 Medium'; 
font-family:'Futura W01 Heavy'; 
font-family:'Futura W01 Bold'; 

*/ 


/* Global 
/* -------------------------------------------- */ 

html, body { 
    width: 100%; 
    height: 100%; 
    min-width:950px; 

} 
body { 
    height: auto; 
    margin: 0; 
    padding: 0; 
    font-family: 'Futura W01 Book', Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.285714286; /* 18px */ 
    color: #2b2b2b; 
    -webkit-font-smoothing: antialiased; 
    z-index: 10; 
    position: absolute; 
    background: url(../images/biographie.jpg); 
    top: 0; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
a { 
    outline: none; 
    color: #2b2b2b; 
    text-decoration: none; 
} 
.menu li a, .footer li a { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 10px; 
    line-height: 1; 
    letter-spacing: 0.10em; 
    text-transform: uppercase; 
    padding-bottom: 2px; 
    border-bottom: 1px solid #ecb825; 
} 
.menu li a:hover, .menu li.selected a { 
    border-bottom: 1px solid #fff; 
} 
/* Fade border under links on hover */ 
.csstransitions .menu a, .csstransitions .footer a { 
    -webkit-transition: border, color 0.2s ease-out; 
    -moz-transition: border, color 0.2s ease-out; 
    -ms-transition: border, color 0.2s ease-out; 
    -o-transition: border, color 0.2s ease-out; 
    transition: border, color 0.2s ease-out; 
} 
p a { 
    border-bottom: 1px solid #ECB825; 
} 
p a:hover { 
    border-bottom-color: #fff; 
} 
h1, h2 { 
    text-transform: uppercase; 
} 
h1 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 20px; 
    letter-spacing: 0.04em; 
    margin-bottom: 1em; 
    padding-top:5px; 
} 
h2 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 16px; 
    letter-spacing: 0.04em; 
    margin-bottom: 1em; 
    padding-top:5px; 
} 
h3 { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-size: 12px; 
    margin-top: 14px; 
    font-weight: bold; 
    margin-bottom: 1em; 
} 
p { 
    font-size: 14px; 
    margin-bottom: 1.25em; 
} 
strong, b { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
    font-weight: bold; 
} 
img { 
    max-width: 100%; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 
/* Navigation 
/* -------------------------------------------- */ 
.menu { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    min-width: 768px; 
    max-width: 1950px; 
    margin: 0 auto; 
    height: 65px; 
    z-index: 310; 
    color: #2b2b2b; 
    background-color: transparent; 
    background-image: url('../images/shadow-menu.png'); 
    background-position: 100% 100%; 
    background-repeat: repeat-x; 
    padding-bottom: 5px; 
} 
.menu .inner { 
    height: 65px; 
    width: 100%; 
    background: #fff; 
    overflow: hidden; 
    text-align: center; 
} 
.menu .logo { 
    position: absolute; 
    left: 81px; 
    top: 19px; 
} 
.menu ul { 
    display: inline-block; 
    margin: 18px auto 0 auto; 
    position: relative; 
    float: right; 
    padding-right: 200px; 
} 
.menu li { 
    float: left; 
    margin-right: 30px; 
    margin-top: 10px; 
} 
.menu li:last-child { 
    margin-right: 0; 
} 
.menu li a { 
    float: left; 
} 
.menu .pipe { 
    width: 1px; 
    float: left; 
    height: 33px; 
    padding-left: 30px; 
    position: relative; 
    top: -10px; 
    background: url('../images/pipe.gif') 100% 0 repeat-y; 
} 
/* Search */ 
.social { 
    position: absolute; 
    right: 61px; 
    top: 23px; 
    text-align: right; 
} 

/*News box xml driven */ 

.linksicons 
{ 
    float: left; 
    width: 120px; 
    height: 60px; 
    margin-left:35px; 
    position: relative; 
    z-index: 95; 
    margin-bottom: 90px; 
    background: #0F3; 
    padding-left:5px; 
    padding-right:5px; 
    /* max-width: 25%; */ 

    overflow-y: scroll!important; 
} 



/* Article - white bg */ 
.twocolumns { 
    -moz-column-count: 2; /* Firefox */ 
    -webkit-column-count: 2; /* Safari and Chrome */ 
    column-count: 2; 
} 
.article { 
    clear: right; 
    float: right; 
    text-align:justify; 
    width: 450px; 
    min-height:400px; 
    height: 70%; 
    padding: 50px 32px 49px 62px; 
    margin-right:75px; 
    position: relative; 
    z-index: 15; 
    margin-top: 90px; 
    background: #ccc; 
    /* max-width: 25%; */ 

    overflow-y: scroll!important; 
} 

.article p { 
    padding-right:20px; 
} 
.article h1, .article h2 { 
    margin-top: -4px; 
    padding-bottom: 2px; 
} 
/* Article - no bg, large text */ 
.article-full { 
    width: 100%; 
    padding: 84px 0 49px 0; 
    background: none; 
    max-width: 100% !important; 
} 
.article-full p { 
    color: #fff; 
    font-size: 60px; 
    line-height: 56px; 
    text-transform: uppercase; 
    font-family: 'Futura W01 Light', Arial, sans-serif; 
    margin: 0 82px; 
} 
.article-full p strong { 
    font-family: 'Futura W01 Heavy', Arial, sans-serif; 
} 
/* Footer 
/* -------------------------------------------- */ 
.footer { 
    position: fixed; 
    z-index: 300; 
    bottom: 0; 
    width: 100%; 
    min-width: 768px; 
    max-width: 1950px; 
    margin: 0 auto; 
    background: #cfc8c0; 
    height: 40px; 
} 

.lien_hot_news { 
    background: #e14242; 
    color: #fff; 
    font: italic normal 18px Georgia, serif; 
    text-decoration:none; 
    height: 38px; 
    width: 270px; 
    padding-top: 8px; 
    display: block; 
    text-align: center; 
    float: left; 
} 

.footer a { 
    color: #fff; 
    text-transform: uppercase; 
    border-bottom-color: #2b2b2b; 
} 
.footer a:hover { 
    border-bottom-color: #ECB825; 
} 

/* Quovolver Demo Styles */ 

/* 
| All required styles for the effect 
| are labeled with this *required* 
*/ 

#quote { 
    left: 2%; 
    position: fixed; 
    top: 335px; 
    z-index: 2; 
} 
blockquote p { 
    margin-bottom: 10px; 
    text-align: right; 
    font-family: 'Futura W01 Book', Arial, sans-serif; 
    font-size: 14px; 
    /* color: #0A4672; */ 
    color: #fff; 
    letter-spacing: 2px; 
    text-shadow: 1px 1px 1px #333; 
} 
blockquote cite { 
    font-family: 'Futura W01 Book', Arial, sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    display: block; 
    letter-spacing: 2px; 
    color: #FFF; 
    text-shadow: 1px 1px 1px #333; 
    letter-spacing: 2px; 
    text-align: right; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-top: -5px; 
    padding-right: 10px; 
} 
/* 
| Setting the width for the blockquotes is required 
| to accurately adjust it's contianer 
*/ 

blockquote { 
    margin: 0 auto; 
    width: 430px; 
    padding-right: 10px; 
} 
/* 
| The #quote_wrap div is created 
| by Quovolver to wrap the quotes 
*/ 

#quote_wrap { 
    margin: 40px 0; 
    padding: 0px; 
}

來源

2013-05-11 Greg

作爲百分比給定的高度只在父元素具有明確的高度設置的情況下才有效 - 如果它只有'height：auto'，那麼它不起作用。 – CBroe 2013-05-11 15:33:46

@CBroe是對的。你需要使用Javascript來實現這一點，綁定到窗口的resize事件。 – maxedison 2013-05-11 15:36:54

你在'html，body'選擇器中設置'height：100％'，但是你在'body'選擇器中用'height：auto'覆蓋它。 – 2013-05-11 15:42:59

你可以嘗試這樣的事：

.article { 
    position:absolute; 
    text-align:justify; 
    width: 450px; 
    min-height:400px; 
    height:70%; 
    right:0; 
    padding: 50px 32px 49px 62px; 
    margin-right:75px; 
    z-index: 15; 
    margin-top: 90px; 
    background: #ccc; 
    overflow-y: scroll !important; 
}

與定位article絕對的，你希望它是你還可以準確地定義（例如，如何遠遠高於其範圍的底部），而不是我現在設置的浮標right:0;。現在你只需要起訴正確的（你想要的）父母的容器設置爲position:relative;一定的高度，所以你使用70％的你想要的。

如果您希望窗口/視口適用於其範圍，則必須將其定位fixed。

來源

2013-05-11 15:42:24

身高的比例不工作

回答

相關問題