Jump to content
php.lv forumi

Div, div 100%


cucumber

Recommended Posts

Nevaru iebraukt, ka panakt, lai pirmais div ir 100px , bet otrais aiznem visu atlikusho lapas dalu?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>div</title>
</head>
<body style="padding: 1px; margin: 0px; height: 100%; "> 
 <div style="border: 1px dashed #555555; height:100px;">
1
 </div>
  <div style="border: 1px dashed #555555; height: 100%;">   
2
 </div>
</body>
</html>

Link to comment
Share on other sites

paldies, tagad zinu ka vispar sho lietu sauc "layout"

Link to comment
Share on other sites

Jautājums no šīs pašas tēmas, taču nedaudz atšķirīgs. Tiek veidots float izklājums (layout) ar 3 kolonām, vēlos panākt, lai visas kolonas ir vienāda augstuma, vadoties pēc augstākās no tām. Googlējot atrodas 2 risinājumi - 'display: tablex' (x vietā '', '-row', '-cell') un 'position: absolute'. Praktiski sanāk, ka 'display: tablex' ir tas pats, kas izmantot tabulas un 'position: absolute' ir nejēdzīgākais čakars un kaudze workaround`u jātaisa (z-index header`im, lieli padding`i u.c.). Varbūt kāds ir kaut kur manījis metodi, kā to panākt neizmantojot, kādu no tikko aprakstītajām metodēm.

HTML man paskatās šāds:

<div id="wrap">
 <div id="title"> ... </div> <!-- logo tiek mests pāri, jo zirnekļiem labāk patīk, ka heading un saturs ir pēc iespējas tuvāk <body> tegam -->
 <div id="login"> ... </div>
 <div id="logo"> ... </div>
 <div id="main-content"> ... </div> <!-- ar navigation tas pats, kas ar logo -->
 <div id="side-bar"> ... </div>
 <div id="navigation"> ... </div>
 <div id="copy-right"> ... </div>
 <div id="foot-nav"> ... </div>
</div>

logo, title un login veido lapas header sadaļu (kā jau minēju, tad logo ar negatīvu margin tiek pārmests pāri) un tiem visiem ir gan konstants platums, gan konstants augstums. navigation, main-content un side-bar veido to daļu, kurai es kolonām vēlos vienādus bet mainīgus garumus (tb augstums nav konstants lielums). Un pēdējie 2 div bloki veido footer ar konstantiem platumiem un augstumu.

Mēģināju arī grupēt vidējo rindu ar vēl vienu div bloku, kas to ieskauj un tā iekšienē izmantot position:absolute, taču tad footer aizbrauc labi zināmā virzienā - uz augšu. Vienu vārdu sakot veidojās ļoti cūcīgs a.k.a nesmuks CSS.

Link to comment
Share on other sites

×
×
  • Create New...