Tworzę witrynę o stałej szerokości (używając klasycznego wrappera z margin:auto), ale chcę, aby pasek boczny tło rozciągał się na prawy koniec ekranu.

Do tej pory udało mi się to:

HTML

<div id="wrapper">
    <div id="left">Content area</div>
        <div id="right">
            <div id="actual-sidebar">
                Sidebar
            <span class="clearme"></span>
        </div>
    </div>
</div>

CSS

body {
    background: #333;
    color: #fff;
    overflow-x: hidden;
}

#wrapper {
    width: 500px;
    height: 1200px;
    margin: auto;
    border: 2px dashed #fff;
}

#left {
    width: 300px;
    height: 500px;
    float: left;
}

#right {
    width: 175px;
    height: 500px;
    margin-left: 325px;
    margin-right: -9999px;
    padding-right: 9999px;
    background: #777;
}

#actual-sidebar {
    width: 100%;
    height: 100%;
    border: 2px dotted #f0f;
}

​ Możesz to zobaczyć w akcji tutaj:
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/

Czy ten rodzaj „paska bocznego o pełnej szerokości” jest możliwy przy użyciu tylko CSS?

W powyższym przykładzie rzeczywista szerokość paska bocznego jest wyróżniona różowym obramowaniem, a reszta to dopełnienie i ujemny margines; działał w chrome, ale IE go zepsuł, więc dodałem overflow-x: ukryty, aby to naprawić.

Problem polega na tym, że kliknięcie i przeciągnięcie w prawo spowoduje przewinięcie widoku, nawet jeśli nie ma nic do wybrania, ostatecznie ukrywając zawartość. Wydaje mi się, że nie mogę ominąć tego problemu.

Czy istnieje rozwiązanie problemu „przeciągnij i przewijaj” lub zupełnie inny sposób na osiągnięcie tego?

2
Valerio Bulla 24 październik 2012, 04:05

2 odpowiedzi

Najlepsza odpowiedź

Jeśli dodasz do #right{ position: fixed;}, pozbędziesz się poziomego paska przewijania. Czy to dopuszczalne?

0
Justin 24 październik 2012, 06:23

Użyj gradientów CSS3 jako tła dla ciała (w tym samym kolorze co pasek boczny), aby stworzyć iluzję, że rozciąga się on do krawędzi ekranu.

.sidebar {
  background: salmon;
}

body {
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
  background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}​

Próbny

0
bookcasey 24 październik 2012, 05:59