1
Я работаю над проектом в течение последних нескольких недель и, наконец, получив представление о дизайне, который хотел использовать абсолютное и фиксированное позиционирование, я ... портирую. Я полагаю, что мой код должен быть отзывчивым. До сих пор у меня не было много проблем, но я столкнулся с тем, что я просто не могу понять.Невозможно отрегулировать высоту на% по любым DIVs
Я считаю, что правильно понимаю, что DIVs можно настроить только в соответствии с их родительским классом. Если я правильно понимаю, я не совсем уверен, почему у меня есть эта проблема, так как те, которые я настраиваю, являются их собственным классом. В любом случае, вот мой код, надеюсь, кто-то может определить мою проблему! Благодаря! Для справки, я использую шаблон для компоновки флюида из Dreamweaver. Также я установил navDrop на 400 пикселей, чтобы подражать тому, что я хочу выполнить.
<!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:[email protected]?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 Styling
* {
-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));
Boilerplate 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; }
}
Можете ли вы указать, какой div вы пытаетесь установить для высоты, и какое поведение вы пытаетесь достичь, отличное от вашего текущего результата? Когда я ставил ваш код выше в скрипке, я получаю этот результат ... это то, что вы ожидаете: http://jsfiddle.net/tqoz2wam/? – ryantdecker
Да, я сделал надпись выше указанного класса navDrop. В настоящее время у меня этот класс установлен на высоту 400 пикселей, чтобы продемонстрировать, как он должен выглядеть, но мне нужно использовать%, чтобы он был отзывчивым. На самом деле, ни один из моих divs не позволяет мне изменять высоту на них, но я уверен, что если найду решение хотя бы на один, то я могу его исправить повсюду. Благодаря! –
попробуйте добавить 'html {height: 100%}' в css – Markasoftware