Stejná výška dvou divů

micro.210

Návštěvník

15. 12. 2008 #1

Mam toto:



<div id="limiter">

    

      <div id="content">

          a

      </div>

    

      <div id="right_menu">

          b

          b

          b

      </div>

   

</div>

potřeboval bych vědět jak nastavit aby byly oba divy content i right_menu stejne vysoké, tzn. right_menu ná text navíce řádků a já chci aby i ten div content byl stejně vysoký v závislosti na tom sloupci right_menu a ne v zavislosti na textu co obsahuje..
Vyskoušel jsem už leccos co se mi podařilo vygooglit ale nic se nechytalo..

Předem děkuji za všechny odpovědi..

Nahlásit jako SPAM

IP: 84.244.85.–

Let me die happier..

Nefaritus

~ Redaktor

Posthunter

Kultivátor příspěvků ve starém fóru – 3.66 % z celku

15. 12. 2008 #2

To micro.21 : S tímhle jsem taky jednou bojoval...nakonec jsem jako takový kontejner stránek použil dvousloupcovou tabulku a je klid :)

Nahlásit jako SPAM

IP: 213.191.111.–

crAzY^

~ Moderátor

+10

Grafoman

15. 12. 2008 #3

To micro.21 : však ten limiter má nějakou určitou výšku ne?... pak by stačilo jenom contentu a right_menu nastavit height: 100%;

Nahlásit jako SPAM

IP: 89.190.64.–

All you need is vision and time.

micro.210

Návštěvník

15. 12. 2008 #4

bohuzel neslo ale uz jsem to zjistil bohuzel to nejde vyresit jinak musi se to obeji tak ze tomu limiteru date pozadi ktere budeslozene s tech dvou pozadi co meli byt v tech sloupcich a content a right_menu budou transparent

Nahlásit jako SPAM

IP: 84.244.85.–

Let me die happier..

JMM

~ Redaktor

Grafoman

Kultivátor příspěvků ve starém fóru – 9.04 % z celku

15. 12. 2008 #5

No jelikož jsem se nudil tak sem zkoušel a nakonec mi vyšlo toto:

CSS

#container {

	width: 600px;

	height:100%;

}



#content {

  background-color:red;  

  float:left;

  width:300px;

  height:100%;



}

#right_menu {

  background-color:blue;

  float:right;

  width:300px;

  height:100%;

}

HTML

 body>

  <div id="container">

  <div id="content">

	dadsddasddasddasd

  </div>

  

  <div id="right_menu">

  dsad

  </div>  



  <hr style="border:0;color:white;height:0;clear:both;" />

  

  </div>

  </body>

Nahlásit jako SPAM

IP: 89.111.99.–

Jan Malý | web: www.malyphoto.cz, @malyphoto

Fugess0

Návštěvník

15. 12. 2008 #6

JMM:

Však tohle přece stejně nefunguje tak jak micro.21 chce ... jediné řešení je falešným backgroundem, ukončení obtékání na tuhle problematiku neplatí ...

rozvržení už je individuální ... jestli obalový element nastaví s přetékáním nebo bez, s height nebo min height .. vnitřní elementy se budou stále na výšku roztahovat podle jejich obsahu..

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

netman920

Super člen

15. 12. 2008 #7

tak ako by to teda bolo najvhodnejsie poriesit?

Nahlásit jako SPAM

IP: 87.244.226.–

Fugess0

Návštěvník

15. 12. 2008 #8

vyřešíš to opakovacím pozadím na výšku (po ose Y), tzv. falešnými sloupci. Můžeš se řídit podle tohohle: http://css.interval.cz/clanky/trisloupcovy-layout-svaty-gral/ a máš na výběr, jestli barvu pozadí nebo místo barvy vytvoříš obrázek který bude znázorňovat tři sloupce a bude se opakovat na výšku.

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #9

Kdysi jsem řešil způsob, kterým by se to dalo udělat BEZ obrázku. Ne, že bych se chtěl vytahovat, ale přišel jsem na něj :-P Tedy jedná se spíše o chybu, ale zatím to zobrazil každý, mnou známý, prohlížeč stejně... :-)
Má to svá jistá omezení, ale pořád je to lepší než obrázek (alespoň se to může lépe přizpůsobit šířce)

<html>

  <body>

    <style type="text/css">

      <!--

      body

      {

        text-align : center; /* zarovnání na střed pro IE */

      }

      #OBAL

      {

        width : 80%;

        background : blue;   /* barva pozadí LEVÉHO divu */

        margin : auto;       /* zarovnání na střed pro nonIE */

        text-align : left;   /* soucast zarovnani pro IE */

      }

      #LEVY

      {

        width : 199px; /* myslim, ze tohle slo resit i lepe, ale ted si nemuzu vzpomenout, asi position : relative; a width : 100% */

        float : left;

      }

      #OBSAH

      {

        margin-left : 200px; /* tohle urcuje sirku leveho divu */

        background : red;

        border-left : 5px solid black;

      }

      -->

    </style>



    <div id="OBAL">

      <div id="LEVY">Tady je text leveho "panelu"</div>

      <div id="OBSAH">Tady je text obsahu (pokud je potreba udelat treti panel, tak se situace trochu komplikuje, ale myslim, ze by mel fungovat stejny postup s tim, ze cely "komplex" divů bude vlozen do OBSAHU)<div style="clear:both;font-size:1px;">tohle je ten zazrak :-) Je nutne, aby tu byl nejaky text, staci i prazdna mezera, velikost pisma pak jde nastavit na nulu</div></div>

    </div>

  </body>

</html>

Nahlásit jako SPAM

IP: 83.208.196.–

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #10

ten div s clear : both (teoreticky i clear : left) musí být uvnitř OBSAHu, a nejspíš tam musí být div - s tagem hr mi to nefungovalo v IE

Nahlásit jako SPAM

IP: 83.208.196.–

Fugess0

Návštěvník

15. 12. 2008 #11

člověče a všiml sis, že tohle tu vůbec neřešíme ?

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #12

A neříkejte mi, že něco nejde vyřešit jinak než blablabla :-) Nejde je jenom jedno slovo z obrovského kvanta možností :-P

Nahlásit jako SPAM

IP: 83.208.196.–

Fugess0

Návštěvník

15. 12. 2008 #13

četl jsi vůbec co se tu řeší a jaké jsou závěry ?

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #14

předpokládám, že:

>> potřeboval bych vědět jak nastavit aby byly oba divy content i right_menu stejne vysoké, tzn. right_menu ná text navíce řádků a já chci aby i ten div content byl stejně vysoký v závislosti na tom sloupci right_menu a ne v zavislosti na textu co obsahuje..

Pokud jsem to dobře pochopil, tak chce dva divy, které mají stejnou výšku v závislosti na obsahu alespoň jednoho z nich

Nahlásit jako SPAM

IP: 83.208.196.–

Fugess0

Návštěvník

15. 12. 2008 #15

jo, ale při prodloužení obsahu jednoho elementu potřebuje aby byly flexibilně stejně vysoké ... a tohle má pohodlné řešení barvou nebo backgroundem ...
tím horším jsou tabulky a podobné ..

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #16

Zkoušel jsi to co jsem tu napsal? Možná je v tom někde chyba, ale mělo by se to zobrazit tak, jak chtěl. Obrázky maj nevýhodu v tom, že je striktně daná šířka.

Nahlásit jako SPAM

IP: 83.208.196.–

Fugess0

Návštěvník

15. 12. 2008 #17

popravdě nezkoušel, protože tam nikde nevidím nastavování výšky ... a bez toho se ty elementy nebudou flexibilně dorovnávat (podle toho který by měl delší obsah)

Nahlásit jako SPAM

IP: 80.78.156.–

Fugess

Wimby

~ Anonymní uživatel
~ 50 příspěvků

15. 12. 2008 #18

Tak to zkus, třeba budeš mile překvapen :-)
BTW pokud bych zadal výšku přesně, tak by nebyla flexní

Nahlásit jako SPAM

IP: 83.208.196.–

DragonBehemont0

Super člen

16. 12. 2008 #19

To Fugess : To Wimby : Funguje to jenom napůl ... obsah musí být delší než menu.

Nahlásit jako SPAM

IP: 212.77.163.–

Nemusíte vědět vše, stačí jen, když víte, kde to najít, a jak to použít. Naučíte se to právě tím používáním ;-)

JMM

~ Redaktor

Grafoman

16. 12. 2008 #20

A ta moje verze nejde či co? sem úplně nečetl to co to má dělat.... ale pochopil jsem to tak že levej i pravej sloupec maj být stejně dlouhý

Nahlásit jako SPAM

IP: 89.111.99.–

Jan Malý | web: www.malyphoto.cz, @malyphoto

Wimby

~ Anonymní uživatel
~ 50 příspěvků

16. 12. 2008 #21

To DragonBehemont : V kterém prohlížeči ti to nešlo? Asi jsem v tom teda udělal chybu... princip je takovej, že levej panel se neroztahuje, roztahuje se ten div "pod" ním, který má barvu levého panelu a obsah je taky uvnitř, ale nemá žádnej float, začíná vlevo od pravého panelu a roztahuje ten div "pod". No a k tomu, aby se zaručilo, že se roztahne levý panel vůči tomu pravému, tak je v tom pravým div se stylem clear:both...
zatim jsem to zkoušel na IE 5.5, 6, 7, Mozille 2, Opeře 9 a Safari 3, a oba divy se roztahly jak měly...

Nahlásit jako SPAM

IP: 83.208.196.–

Pepa Vrabec

~ Anonymní uživatel
~ 1 příspěvek

12. 7. 2014 #22

Možná taky možnost kterou jsem to vyřešil já. Oba elementy mám v obalovacím divu, jelikož mám barvu obou elementů bílou ale potřebuji aby bylo pozadí mezi nimi barevně měnitelé z menu (je tam mezera) tak obrázek nemůžu použít.

Dal jsem obalu bílé pozadí, levému divu border-right:10px barvy pozadí, pravému to samé na levou stranu a dal margin -10px aby se "bordery" prekrývali, barvu borderu už měnit můžu a rozdíl ve výšce vidět neni.

Nahlásit jako SPAM

IP: 176.12.115.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

14. 7. 2014 #23

Nejak nechapu, proc by nesel pouzit obrazek?
Udelas pruh, nastavis ho do obalovaciho divu jako pozadi. Background-repeat pro y, ale pro x ne. Pomoci background-position muzes dokonce menit jeho pozici zleva, kdyz by sis stam pridal JS nebo PHP kod.

Nahlásit jako SPAM

IP: 2001:718:2601:258:d135:b4...–

Zbyňas

~ Anonymní uživatel
~ 7 příspěvků

2. 9. 2015 #24

Jste lamičky, všechno jde a naprosto bez problémů :)

.main-div   {
       display: block;
       position: fixed;
       width: 800px;
       margin: 0 auto;
       height: 100%;
       background-color: white;
       }

.left-menu   {;
        height: 100%;
       position: fixed;
       float: left;
       display: block;
       width: 170px;
       background-color: yellow;
       margin-left: 5px;
       }

.middle   {
       left: 170px;
       float: left;
       position: fixed;
        height: 100%;
       display: block;
       width: 440px;
       background-color: blue;
       margin-left: 5px;
       }

main-div obaluje ty vnořené další dva divy, je to jasné, ne? :D

Dost špatně se dává ještě něco pod ty dva oddíly dolů, ale jde to taky skoro snadno. Height 100 % se počítá až od obsahu, co je před ním, třeba banner :) Funguje easy všude. A pak že to nejde :)

Nahlásit jako SPAM

IP: 62.245.71.–

sir_arthur

~ Redaktor

Stálý člen

3. 9. 2015 #25

Zajímavé

Zobrazit udělené karmy příspěvku od uživatelů

▲

Tomáš123 +

Dalo by sa pouzit napriklad iny display parameter.

#limiter {
	display: table;
}
#content,
#right_menu {
	display: table-cell;
}

Nahlásit jako SPAM

IP: 89.173.218.–

@mattonik

← Zpět na seznam vláken ← Zpět do Fóra

Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku

Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.

Jméno: *

Twitter: bez zavináče

Avatar:

Podporujeme Gravatara.

Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.

Tvůj text: *

Zdrojový kód Vložit obrázek Video Smajlíci

Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.

Sledovat nové příspěvky (pouze pro přihlášené)

Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.

Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 7 hostů

Podobná vlákna

Podmínky při řešení soustavy dvou lineárních rovnic o dvou neznámých — založil martin.kubik

C / C++

Moderátoři diskuze

Chci se stát moderátorem JMM, Nefaritus, hrach, Kobi, Bryant, null_while

Stejná výška dvou divů – CSS – Fórum – Programujte.com

Fórum › CSS