Home
setați înălțimea div folosind jquery (stretch div height) (Programare, Jquery, Css)

setați înălțimea div folosind jquery (stretch div height) (Programare, Jquery, Css)

aprilie 8, 2021 Programare
Alfred a intrebat.
a intrebat.

Am 3 div-uri cu id-uri header, content și footer. Header și footer are înălțime fixă și sunt stilizate să plutească în partea de sus și de jos. Vreau ca mijlocul content înălțime calculată automat cu jquery. Cum pot face acest lucru posibil?

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

Mulțumesc în avans…:)

blasteralfred

Comentarii

  • În mod implicit, browserele nu calculează automat înălțimea la conținutul unui div? –  > Por John Strickler.
  • Antetul și piciorul de pagină au position:fixed? –  > Por Šime Vidas.
  • @Šime, probabil pentru a se potrivi între header și footer… –  > Por tomsseisums.
  • automat div height=100% nu funcționează în firefox… Pot rezolva acest lucru dacă obțin înălțimea în px și apoi pot scădea înălțimile header și footer, iar setarea marjei superioare va face ca div-ul meu să plutească între header și footer :) –  > Por Alfred.
  • @basteralfred încearcă să adauge height: 100% la tag-urile html și body. Atunci ar trebui să –  > Por Mavelo.
6 răspunsuri
Naftali aka Neal

ei bine, poți face asta:

$(function(){

    var $header = $('#header');
    var $footer = $('#footer');
    var $content = $('#content');
    var $window = $(window).on('resize', function(){
       var height = $(this).height() - $header.height() + $footer.height();
       $content.height(height);
    }).trigger('resize'); //on page load

});

vezi vioara aici: http://jsfiddle.net/maniator/JVKbR/
demo: http://jsfiddle.net/maniator/JVKbR/show/

Comentarii

  • acum funcționează!!! este ceva bug cu fișierul meu jquery… mulțumesc 🙂 –  > Por Alfred.
  • @blasteralfred versiunile mai noi ale FF nu permit manipularea ferestrelor decât dacă utilizatorul o permite în mod specific în preferințele sale. –  > Por Mavelo.
  • bună @RobertMullaney , mulțumim pentru actualizare … dar, așa cum a spus Neal, „nimic din toate acestea nu reprezintă manipulare a ferestrelor” +1 .. 🙂 –  > Por Alfred.
  • Scuzele mele, probabil că am adăugat acest comentariu în timp ce mă uitam la o problemă similară care încerca o ajustare a dimensiunii prin script. PS: Adevărat, în timp ce nu se modifică atributele ferestrei, deși, din punct de vedere tehnic, manipulăm obiectul fereastră prin adăugarea unui ascultător… semantică 😛 -.  > Por Mavelo.
  • Ați uitat să puneți paranteze în jurul $('#header').height() + $('#footer').height() deși. Calculul de var height nu este corect acum. –  > Por Jules.
Shmiddty

Modul corect de a face acest lucru este cu vechiul CSS:

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

Și bonusul este că nu trebuie să vă atașați la evenimentul window.onresize! Totul se va ajusta pe măsură ce documentul se reface. Totul pentru prețul mic de patru linii de CSS!

Comentarii

  • Aceasta este o abordare alternativă frumoasă. Îmi place cel mai mult răspunsul lui Zirak pentru că este ceea ce a cerut OP (răspunsul jQuery). –  > Por Benjamin Gruenbaum.
Zirak

Din capul locului:

$('#content').height(
    $(window).height() - $('#header').height() - $('#footer').height()
);

La asta vă referiți?

Amol M Kulkarni

Puteți lega funcția în felul următor, în loc de init la încărcare

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

Murat Kezli
$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});

function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/ 
$('#content').css({"height":calculatecontsize + "px"} );
}

Muhammad Awais

Cred că va funcționa.

$('#DivID').height('675px');

Tags:,

Related Posts