无法在任何 DIF 上按 % 调整高度
Can't Adjust Height by % On Any DIVs
在过去的几周里，我一直在做一个项目，在终于使用绝对和固定定位了解了我想要的设计之后，我......移植。。。我想我的代码是响应式的。到目前为止，我没有遇到很多问题，但遇到了一个我似乎无法弄清楚的问题。
我相信我理解正确，DIV 只能根据其父类进行调整。如果我理解正确，我不太确定为什么我会遇到这个问题，因为我正在调整的div 是他们自己的类。无论如何，这是我的代码，希望有人可以查明我的问题！谢谢！作为参考，我使用的是 Dreamweaver 中的流体网格布局模板。此外，我将navDrop设置为400px以模仿我想要完成的任务。
JFiddle
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/dropdown.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<!--Nav Wrapper-->
<div class="bannerWrap">
<img class="banner" src="images/general/site/bannerlg.png">
</div>
<!--Begin Navigation Wrapper-->
<div id="navWrapper">
<!--Begin Nav Wrapper for UL styling-->
<div class="nav">
<!--Begin Navigation List-->
<ul>
<li><a href="#">Final Cut</a></li>
<!--Begin Nav Drop Down Wrapper-->
<div class="navDrop" >
<div class="navLeft">
<span>DBZ Final Cut</span><br><br>
<ul class="navDropLinks">
<li><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></li>
<li><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></li>
<li><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></li>
<li><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></li>
</ul>
<p class="dropContent">DBZ Final Cut is all about Panini America's Dragon Ball Z Trading Card Game. Released in 2014, the game is based off it's predecessor, the very popular Dragon Ball Z Collectible Card Game from Score Entertainment. With a rich legacy that enthralls thousands of players, the DBZ TCG is here to stay. DBZ Final Cut's goal is to be the premier website for all competitive players, bringing you cutting edge articles on strategy, card breakdowns, style breakdowns and tournament reports. Along with articles, we provide important game documents, such as the latest Clarification Rulings Documents, all the way to templates to create your own custom cards!
</p>
</div>
<!--Begin Nav Center-->
<div class="navCenter">
<span class="nav-titles">Be Apart of DBZ Final Cut!</span><br>
<a href="#"><img class="navImage" src="images/general/site/beapart.png" alt="article image"/></a><br>
<p class="dropContent">Want to help? We want you to! Whether you want to write articles, want to start a podcast, or want a spot to have your recorded matches uploaded and viewed by DBZ fans, we want to do it all! Simply send an email <a href="mailto:dbzfinalcut@gmail.com?subject=DBZFC Help">HERE</a>.
</p>
</div>
<!--End of Nav Center-->
</div>
<!--End Nav Drop Down Wrapper-->
</ul>
<!--End Navigation List-->
</div>
<!--End Navigation for UL Styling Wrapper-->
</div>
<!--End Navigation Wrapper-->
</body>
</html>
CSS 样式
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: grey;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif
}
body {
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
background: grey;
width: 100%;
height: 100%;
/* Used so 1.6 em = 16pts */
font-size: 62.5%;
}
#bodyWrap {
width: 57%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/*Nav Wrapper*/
#navWrapper {
position: relative;
width: 57%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/*Banner Wrapper*/
.bannerWrap {
position: relative;
width: 57%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/*Banner Styling*/
.banner {
position: relative;
width: 100%;
}
/*Main Nav Box Styling*/
.nav {
position: relative;
width: 100%;
list-style:none;
top: -1px;
background: #323552;
background: -moz-linear-gradient(top, #323552, #1a1b24);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
}
.nav ul {
list-style-type: none;
postion: relative;
width: 100%;
height: 3%;
padding: 0;
margin: 0;
background: transparent;
}
/*Main Nav Button Styling*/
.nav li {
display: inline-block;
position: relative;
background: transparent;
}
.nav a {
padding: 7px 10px;
display: block;
background: transparent;
text-decoration: none;
font-size: 1.5em;
text-transform: uppercase;
opacity: .7;
color: white;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
.nav a:hover {
color: white;
opacity: 1;
-webkit-transition: opacity .2=s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
}
.nav > ul > li:hover > a {
background: #b9b9b9;
}
/*Drop Down*/
.navDrop {
position: relative;
width: 100%;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 1px black solid;
overflow: hidden;
background: white;
}
.navIcon {
width: 15px;
height: 15px;
background: transparent;
float: left;
postion: relative;
margin-top: 5.5px;
}
.navImage {
display: relative;
width: 100%;
height: 170px;
background: transparent;
opacity: .2;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;
}
.navImage:hover {
opacity: 1;
-webkit-transition: opacity .5s ease-in;
-moz-transition: opacity .5s ease-in;
-o-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
.navLeft {
position: absolute;
width: 32%;
left: 1%;
display: inline-block;
background: transparent;
}
.navLeft > span {
display: inline-block;
font-size: 1.4em;
font-weight: bold;
color: #b9b9b9;
margin-left: auto;
margin-right: auto;
background: transparent;
}
.navCenter {
position: absolute;
width: 32%;
left: 35%;
display: inline-block;
background: transparent;
}
.navCenter > span {
display: inline-block;
font-size: 1.4em;
font-weight: bold;
color: #b9b9b9;
margin-left: auto;
margin-right: auto;
background: transparent;
}
.navCenter > a {
margin: 0;
padding: 0;
display: inline-block;
}
.navDropLinks {
display: inline-block;
background: transparent;
}
.navDropLinks > li {
list-style: none;
display: inline-block;
}
/*Nav Sub Menu Hyper*/
.navDropLinks > li > a {
color: black;
font-size:11px;
text-decoration: none;
font-weight: bold;
background: transparent;
color: #b9b9b9;
float: left;
}
.dropContent {
position: relative;
background: transparent;
color: #b9b9b9;
text-align: justify;
}
.dropContent > a {
background: transparent;
color: #b9b9b9;
text-align: justify;
font-size: 1.0em;
display: inline-block;
text-decoration:none;
opacity: .7;
color: white;
padding: 0px;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
.JS
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:('/'/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^'{]+'{([^'{'}]+'{[^'}'{]+'})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url'()['"]?([^'/')'"][^:')'"]+)['"]?('))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^'{]+)'{(['S's]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only's+)?([a-zA-Z]+)('sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/'(min'-width:['s]*(['s]*[0-9]+)px['s]*')/)&&parseFloat(RegExp.$1),maxw:D.match(/'(max'-width:['s]*(['s]*[0-9]+)px['s]*')/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("'n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
样板 CSS
/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
你需要添加
html, body {
width: 100%;
height: 100%;
}
到您的 CSS 文件。这样，身体内部的所有元素都可以设置为相对于身体高度的百分比高度。
希望这有帮助。
相关文章：
- ExtJS——在展开/折叠时调整面板高度
- 如何自动调整标签的高度以适应内容
- window.open根据动态内容自动调整高度和宽度
- 如何在HTML CSS JavaScript中根据纵横比调整高度或宽度
- 使 iframe 自动调整高度
- iframe 自动调整高度大小不起作用
- Iframe内容的可调整高度(在wordpress中）
- 自动调整高度为全宽度图像过滤器
- 如何调整高度时，减少宽度
- 在使用jQuery时，紧跟在ScrollTop之后调整高度是非常不稳定的
- 画布调整宽度，但不调整高度
- JavaScript自动调整高度大小
- 在移动视图中调整高度
- 调整高度&宽度以百分比而非像素表示
- JavaScript调整高度问题
- 无法在任何 DIF 上按 % 调整高度
- 自动调整高度CSS
- iframe自动调整高度作为内容的变化
- 当子块调整高度时，内联块自动适合子块宽度
- 在CSS和JS中动态调整高度
