Cum de a crea un Div umple spațiul vertical disponibil fără a se suprapune conținutul div?

Lucrez la un aspect cu un container (div), în interiorul containerului există două elemente, un div pentru antet și un alt div pentru conținut. Antetul div are o înălțime fixă, div pentru conținut trebuie să umple spațiul disponibil. Containerul div are un stil propriu și nu poate fi suprapus. Scopul meu este să creez elemente simple bazate pe div pentru a dispune de widget-uri simple pe o pagină web.

Am verificat alte întrebări similare, cum ar fi:

Dar niciuna dintre aceste soluții nu este valabilă pentru mine.

Am reușit să obțin acest html/css:

<?xml version="1.0"?>
<html>
    <head>
        
    </head>
    <body>
        <div id="workbench" class="workbench">
            <div id="widget" class="widget">
                <div id="widget-header" class="widget-header">
                    Header
                </div>
                <div id="widget-body" class="widget-body">
                    Body
                </div>
            </div>
        </div>
    </body>
</html>

Aceasta funcționează ca un farmec pe FireFox și Chrome, dar nu funcționează pe Internet Explorer 8:

Page result

Ma poti ajuta?

0
Testez pe IE8
adăugat autor Teg, sursa
Folosind virajul, IE8 afișează butonul de compatibilitate și renderul este corect, încărcând html-ul dintr-un fișier local, rezultatul este asemănător capturii de ecran în întrebare, știi de ce IE8 face diferite între fila și un fișier local?
adăugat autor Teg, sursa
@EliranMalka mulțumesc foarte mult pentru folosirea viola, pot spune diferența dintre html violă și a mea, am fost folosind antet xml, în timp ce IE8 pentru redare corectă nevoie de
adăugat autor Teg, sursa
a făcut o violă din această și a fost redat practic în toate versiunile de IE, iar problema pare să se reproducă pe versiunile 6 și 5.5. chiar vrei să mergi acolo?
adăugat autor Eliran Malka, sursa
vezi răspunsul meu ..
adăugat autor Eliran Malka, sursa
Ce versiune de Internet Explorer testați?
adăugat autor Kyle, sursa

3 răspunsuri

Pe măsură ce aveți o înălțime pe widgetul de 500px și antetul widgetului este de 50px; de ce nu face doar widget-corp 450px; (de asemenea, scăderea oricărei marje suplimentare și umplutură) și să se facă poziționarea reciprocă a antetului și a widget-corpului.

0
adăugat
Da, în exemplul de înălțime widget este fix, dar în utilizarea reală am diferite widget-uri de înălțime diferite, am nevoie de o soluție pentru a lucra pe oricare dintre ele fără a fixa înălțimea corp-widget de fiecare dată
adăugat autor Teg, sursa

realizand ca nu vizezi piata IE5.5/IE6, si de descrierile tale (face fine pe jsFiddle, in timp ce nu dintr-un fisier), problema pare sa provina din lipsa unui declarație doctype .

pentru ca documentul să fie redat corect, trebuie să specificați un doctype, pentru a refuza browserul să cadă în modul quirksmode. documentul dvs. pare să se conformeze unei convenții XHTML valide, prin urmare puteți utiliza doctype-ul de tranziție XHTML pentru a instrui IE8 să se redea în modul standard sau utilizați doctype HTML5 (împreună cu un HTML5 shim/shiv , dacă veți folosi și semantica HTML5).

doar pentru comoditate, declarația doctype de tranziție XHTML:


notă: Modernizr conține un cod HTML5 propriu și este recomandat indiferent de ușurința dezvoltării.

Iată jsFiddle pentru a vă împiedica cu

0
adăugat
Da, doctype a fost problema, mulțumesc mult pentru informații utile! Voi verifica shiv
adăugat autor Teg, sursa

jquery poate ajuta cu asta.

$('.workbench').each(function(){
  var total=$(this).height();
  var headerHeight=$(this).find('.widget-header').height();
  $(this).find('.widget-body').height(total-headerHeight);
});
0
adăugat
Aș prefera o soluție CSS
adăugat autor Teg, sursa
jQuery nu este răspunsul la tot.
adăugat autor Eliran Malka, sursa
jQuery poate ajuta în mod evident, dar OP nu a menționat utilizarea acestuia și includerea unei biblioteci externe pentru o soluție ad-hoc pare redundantă. este întotdeauna cel mai bine să KISS :)
adăugat autor Eliran Malka, sursa
@Eliran: comentariu inutil. nu a obținut scopul legăturii tale. am spus jQuery poate ajuta. dacă puteți dovedi că nu poate. pătrundă-l. dont face statui trivial. dar când construim widgeturi, jQuery este absolut o alegere foarte valabilă pentru a ajuta la astfel de cazuri.
adăugat autor Aymen, sursa