JQuery-zone de contenu Mobile hauteur 100% entre la tête et le pied
beaucoup de sujets sur ce... mais de ne pas avoir le point de savoir comment le faire.
j'ai mon en-tête JQM et mon pied de page. Je veux que la zone de contenu remplisse la hauteur de 100% entre la tête et le pied.
C'est mon code, Comment est-ce possible?
<body>
<div data-role="page" id="entryPage" data-theme="d">
<div data-role="header" id="header" data-position="fixed" data-theme="d">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="content" data-theme="d">
<div id="columnwrapper">
<div id="leftcolumn">
<div class="innertube">
Point 1
</div>
<div class="innertube">
Point 1
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<div id="switch1">
test
</div>
</div>
<div class="innertube">
test2
</div>
</div>
<div id="contentcolumn">
<div class="innertube">Content</div>
<div class="innertube">Content</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed" data-theme="d">
<div id="switch2">
<a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
CSS:
#columnwrapper{
float: left;
width: 100%;
margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
background-color: #C8FC98;
}
#leftcolumn{
margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 40px; /*Width of right column*/
margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
background: yellowgreen;
}
#contentcolumn{
float: left;
width: 75%; /*Width of content column*/
background-color: blue;
}
.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Merci
3 réponses
le CSS position: fixed ne fonctionne pas correctement dans les navigateurs mobiles. Mon expérience est avec Android et iOS navigateurs et aucun d'entre eux impliment position: fixed correctement (l'exception est le navigateur iOS 5 mais il est toujours en version bêta).
plutôt que de fixer un élément à l'écran et de ne pas le déplacer lorsque l'utilisateur défile dans les navigateurs mobiles, il a tendance à être traité comme position: absolute et il bouge Quand la page défile.
aussi en utilisant le CSS overflow la propriété ne permet pas de défiler sur la plupart appareils mobiles (iOS le prend en charge, mais l'utilisateur doit savoir utiliser deux doigts tout en faisant défiler dans un scrollable-div).
vous pouvez cependant utiliser CSS mais soyez conscient que vous aurez besoin d'utiliser position: absolute ou vous pouvez utiliser JavaScript pour définir les hauteurs sur les éléments.
Voici une solution Mobile jQuery utilisant JavaScript pour définir les hauteurs des éléments de pseudo-page:
$(document).delegate('#page_name', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
pour obtenir une finition parfaite, vous devez prendre en considération le comportement de l'appareil cible barre d'adresse parce que si vous voulez une page Web plein écran alors vous devez ajouter la hauteur de la barre d'adresse à la hauteur de la page.
Merci, Jasper! Cela m'a beaucoup aidé.
j'ai dû beaucoup m'amuser pour que ça fonctionne avec plusieurs en-têtes/pieds de page, et pour tenir compte de la barre d'url dans ios. J'ai pensé que je partagerais ma solution pour quiconque ayant ce problème. Cela fonctionne pour moi jusqu'à présent dans le simulateur ios, mais je serais désireux de savoir comment cela fonctionne sur d'autres appareils.
/* detect device */
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android');
$(document).delegate('#the_page', 'pageshow', function () {
var $page = $(this),
$target = $(this).find('.fullHeight'),
t_padding = parseInt($target.css('padding-top'))
+ parseInt($target.css('padding-bottom')),
w_height = (ios)? screen.height-65: $(window).height(); // "-65" is to compensate for url bar. Any better ideas?
headFootHeight = 0;
// Get total height for all headers and footers on page
$page.find('[data-role="footer"], [data-role="header"]').each(function() {
var myTotalHeight = $(this).height()
+ parseInt( $(this).css('padding-top') )
+ parseInt( $(this).css('padding-bottom') );
headFootHeight += myTotalHeight;
});
var the_height = (w_height - headFootHeight);
$page
.height(w_height)
.find('.fullHeight')
.height(the_height - t_padding);
});
ce script définit une hauteur de 100% sur '.fullHeight', au lieu de [data-role = content] pour donner plus flexibilité, mais vous pouvez simplement ajouter la classe fullHeight à votre élément [data-role=content].
un problème que j'ai toujours est de compenser pour la barre d'url dans ios, et de trouver une hauteur de fenêtre qui fonctionne à travers les appareils. Toutes les idées sur qui?
le CSS:
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50px;
background-color: #333;
overflow: hidden;
z-index:1000;
-webkit-transform: translateZ(0);
opacity:.9;
}
header{
display:block;
position: fixed;
left:0;
right:0;
top:0;
height:50px;
overflow: hidden;
}
section{
display:block;
position:fixed;
left:0;
top:50px;
bottom:50px;
right:0;
overflow-y: auto;
}
nav{
display:block;
height:100%;
-webkit-backface-visibility: hidden;
}
.body{
overflow-y: hidden;
}
.bar {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
la seule html nécessaire:
<header class="bar" id="AllHead"></header>
<div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->
<footer class="bar" id="allFoot"></footer>
</div><!-- /page -->
vous pouvez alors définir les éléments que vous voulez à l'intérieur du pied de page et de la barre de navigation inférieure cela aura toujours l'air juste, peu importe ce qui se passe, aussi cette tendance flash sur et Hors chaque fois que vous touchez quelque chose. espérons que cela aide