html - Få float til at fylde 100% - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html

Bruger #17215 @ 25.08.12 00:28

Hejsa

Jeg har et lille problem med at jeg ikke kan få en div med et billede i til at fylde det samme i højden som det indhold der er deri.

HTML kode

 <div>
    <div class="float-right-with-full-height">
       <img class="full-height" src="floatrightarrow.gif" />
    </div>
    <div>Titel til venstre uden float</div>
    <div>Tekst til venstre uden float</div>
    <div>Mere tekst til venstre uden float</div>
 </div>

CSS kode

 .float-right-with-full-height
 {
    float:right;        
    background-color:Red;
    height:100%;
    min-height:100%;
 }
 
 img.full-height
 {
     height: 100%;
     min-height: 100%;
 }

Jeg kan ikke få billedet til at skalere automatisk til indholdet i den div udenom således at højden altid tilpasser sig.
Det er en pil og som skal pege til højre og hvis der er meget indhold skal blive højere for at den passer til indholdet og kortere hvis der ikke er så meget indhold.

Indlæg senest redigeret d. 25.08.2012 00:29 af Bruger #17215

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 25.08.12 13:56

4.283

Det vil ikke kunne lade sig gøre med float, og height. Der er stadig mange begrænsninger forbundet med height i procent. Browseren er ikke så god til at udregne den procentvise højde af det omsluttende elements relative højde.

Men du kan løse det med position:absolute.

HTML kode

 <!DOCTYPE html>
 <html>
     <body>
         <div style="position: relative;">
             <img src="transparent.gif" style="background: #ccc; position: absolute; right: 0px; top: 0px; bottom: 0px; height: 100%;  width: 100px; " />
             <div style="margin-right: 100px;">asdasd<br />adasd<br />asdasd<br /><br /><br /><br />asd</div>
         </div>
     </body>
 </html>

Indlæg senest redigeret d. 25.08.2012 14:02 af Bruger #10216

Bruger #8773 @ 25.08.12 12:32

658

Du skal altid huske et clearfix efter brug af float for at undgå problemer med højden på elementer

Bruger #17119 @ 25.08.12 12:43

Hejsa. Vil tro at dette vil løse det

HTML kode

 <div>
     <div class="float-right-with-full-height">
         <img class="full-height" src="floatrightarrow.gif" />
     </div>
     <div class="clear"></div>
     <div>Titel til venstre uden float</div>
     <div>Tekst til venstre uden float</div>
     <div>Mere tekst til venstre uden float</div>
 </div>

CSS kode

 .float-right-with-full-height {
     float:right;
     background-color:Red;
     height:100%;
     min-height:100%;
 }
 img.full-height {
     height: 100%;
     min-height: 100%;
 }
 .clear {
     clear: both;
 }

Indlæg senest redigeret d. 25.08.2012 12:45 af Bruger #17119

Bruger #13010 @ 25.08.12 12:49

440

Demo : http://scootergrisen.dk/test/test0158.html

Indlæg senest redigeret d. 25.08.2012 12:53 af Bruger #13010

Bruger #17215 @ 25.08.12 15:23

408

Michael
Tak det løste det

Jeg havde også lavet en div udenom fordi det er nemmere for mig med transitions jeg vil kunne genbruge fra et andet sted de er definerede, men takker det var lige det jeg søgte.
Valgte så oveni også at fjerne float og bruge display: inline-block i stedet.

Indlæg senest redigeret d. 25.08.2012 15:50 af Bruger #17215

Få float til at fylde 100%

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler