Dlaczego ten układ CSS Full Height Layout nie wyświetla się prawidłowo?

Question

Aktualizacja: Nagradzam nagrodę w wysokości 50 dla każdego, kto może mi pomóc uzyskać this design.

---

Tak próbowałem to naprawić przez ostatnie 2-3 godziny, ale nie mogę tego zrobić. Może ktoś, kto ma doświadczenie w CSS lub jquery, może mi pomóc. Próbuję wykonać accomplish this. To jest my result. Problem polega na tym, że podczas zmiany rozmiaru okna przeglądarki zawartość kolumny B zostaje odcięta, a po lewej stronie kolumny A.jest dodatkowa biała przestrzeń, aby zaoszczędzić czas.

CSS:

#public { 
    width:100%; 
} 
#publiC#container { 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    min-width:1050px; 
} 
#public .left { 
    float:left; 
    width:40%; 
    height:100%; 
    background-color:#fff; 
} 
#public .left .content { 
    float:right; 
    width:365px; 
    margin-top:20px; 
    text-align:center; 
} 
#public .left .platforms { 
    margin-top:40px; 
} 
#public .left .aila { 
    display:block; 
    margin-top:25px; 
} 
#public .left .copy { 
    margin-top:20px; 
    color:#171515; 
    font:bold 12px Arial, Verdana; 
} 
#public .right { 
    float:right; 
    width:60%; 
    height:100%; 
    overflow:hidden; 
} 
#public .right .content { 
    float:left; 
    width:665px; 
    min-height:704px; 
    margin-top:20px; 
    background:url(images/public-right-shadow.png) no-repeat left top; 
} 

HTML:

<div id="public"> 
    <div id="container"> 
    <div class="left"> 
     <div class="content"> 
     <img src="images/logo2.png" alt="" class="logo" /> 
     <img src="images/supported-platforms.png" class="platforms" /> 
     <div class="copy">&copy; all right reserved 2012</div> 
     </div> 
    </div><!--.left--> 
    <div class="right"> 
     <div class="content"> 
     Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
     </div> 
    </div><!--.right--> 
    </div><!--#container--> 
</div><!--#public--> 

Answer 1

Zrobiłem kilka prostych zmian do Ty i o ile mogę powiedzieć, że działa tak jak na obrazie, który załączyłeś w swoim pytaniu. Zobacz http://joshdavenport.co.uk/staging/swd/.

Różnice są:

#publiC#container { 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 

    min-width: 960px; 
} 

Ta regulacja min-width pozwala swój projekt, aby dopasować mocniej w lewo, gdy zmniejszenie rozmiaru strony.

#public .right .content { 
    /* change padding value to whatever feels right */ 
    padding-right: 10px; 
    float:left; 
    /* this loses the fixed size though */ 
    min-height:704px; 
    margin-top:20px; 
    background:url(images/public-right-shadow.png) no-repeat left top; 

    width: 510px; 
    padding: 10px 40px; 

}

width tutaj zapewnić ten element pozostaje taką samą szerokość cały czas i padding Gwarantuje to pozostaje z dala od lewej okolicy. Prawdopodobnie będziesz chciał to poprawić.

Answer 2

dont zdają się powielać tę samą moc, jednak wydaje mi się, że problem jest w tych szerokości wartości Oba obiekty klasy treści. Masz dwa obiekty o stosunkowo dużych rozmiarach, określone wartości to 40% i 60% rozmiaru twojego okna. Ale wewnątrz nich masz bezwzględne wartości szerokości (365px i 665px) .Ponieważ Twój Scre Rozdzielczość enshot to 1076px × 784px, oznacza to, że Twoja prawa kolumna, #public .right, jest wycięta na około 600 + - px szerokości, jednak umieszczasz w niej szerokość 665px. Z pewnością przepełni twój obiekt zawijający. W związku z tym tworzenie prawidłowego miejsca dla znikającego tekstu. Dla Twojego przepełnionego problemu tekstowego szukałbym tam problemu.

Teraz za dodatkową przestrzeń po lewej stronie twojego #public .left prawdopodobnie to się dzieje, ponieważ przesuwasz jej zawartość po prawej stronie.

Ale tak jak powiedziałem, nie mogę powtórzyć tego samego wyniku. Jeśli więc majstrowanie z tym nie rozwiązuje problemu, możesz poprosić o więcej.

EDIT: w prawo problemu niepożądane, nawet jeśli obsługują 1030px szerokości ind swojej

min-width: 1050;

Twój

.right publicznego

dostaje od tego przy max 630, ale że próbujesz dopasować 665px

Ten kod powinien rozwiązać problem

#public .right .content { 
    /* change padding value to whatever feels right */ 
padding-right: 10px; 
float:left; 
/* this loses the fixed size though */ 
width:100%; 
min-height:704px; 
margin-top:20px; 
background:url(images/public-right-shadow.png) no-repeat left top; 
} 

Answer 3

Tutaj ja s jak mogę próbować wdrożyć to. Ustawię lewą i prawą wysokość za pomocą jQuery. Zmieniłem też nieco język znaczników, aby używać identyfikatorów zamiast klas dla elementów takich jak lewy i prawy, więc selektor jQuery będzie szybszy.

CSS:

/* apply a natural box layout model to all elements */ 
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

    html, 
    body 
    { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 
    #public 
    { 
     width:100%; 
     height:100%; 
    } 

    #publiC#container 
    { 
     min-width:1050px; 
    } 

    #publiC#left 
    { 
     float:left; 
     width:40%; 
    } 

    #publiC#left .content 
    { 
     margin-top:20px; 
     width:365px; 
     float:right; 
    } 

    #publiC#left #logo img 
    { 
     max-width:100%; 
     background-color:#e5e5e5; 
    } 

    #publiC#left #platforms 
    { 
     background-color:#888; 
     height:30px; 
    } 

    #publiC#right 
    { 
     float:left; 
     width:60%; 
     background-image:url(images/bg_public.jpg); 
    } 

    #publiC#right .content 
    { 
     height:100%; 
     padding:20px; 
     background:url(images/public-right-shadow.png) no-repeat left top; 
    } 

HTML:

<div id="public"> 
    <div id="container"> 
    <div id="left"> 
     <div class="content"> 
     <div id="logo"><img src="images/logo2.png" alt="" /></div> 
     <div id="platforms"><img src="images/supported-platforms.png" /></div> 
     <div id="copy">&copy; all right reserved 2012</div> 
     </div> 
    </div><!--.left--> 
    <div id="right"> 
     <div class="content"> 
     Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
     </div> 
    </div><!--.right--> 
    </div><!--#container--> 
</div><!--#public--> 

jQuery:

$(document).ready(function(){ 
    var WindowResize = function(){ 
     var WindowHeight = $(window).height(); 
     $('#left, #right').css('height', WindowHeight); 

    } 

    WindowResize(); 
    $(window).bind('resize', WindowResize); 
});