div z pełną szerokością i paddingiem

0

Element div ma atrybuty

width: 100%;
padding: 0 56px 0 296px;

no i teraz jest problem bo pojawia się poziomy pasek przesuwu. Co powoduje, że szablon, który dopasowuje się do całego okna przeglądarki zanika jak przejade scrollerem w prawo. Rozwiązaniem tego jest oczywiście overflow: hidden dla diva nadrzędnego, ale wtedy część strony znika.

Ogólnie testowałem już wiele rzeczy i nic nie przyniosło porządanego efektu. Czy istanieje jakaś metoda (poza javascriptem), żeby szerokość tego diva była na całą stronę, ale żeby obejmowała ona padding czyli 100% - padding ?

1

Po prostu usuń width: 100%. Elementy blokowe domyślnie wypełniają całą dostępną szerokość minus padding (i ew. border/marginesy jeśli masz ustawione).

0

Nie, nie istnieje, ale:
#przecież szerokość elementów blokowych się automatycznie dopasowuje do wolnego miejsca
#jeśli już musisz użyć width: 100%, to możesz w jednej warstwie umieścić drugą i jej ustawić chciane dopełnienie.

0

wszystko by się zgadzało gdyby nie specyficzna konstrukcja szablonu, która wygląda tak:

<div class="wrapper">
  <div class="main"></div>
</div>
<div class="sidebar"></div>
.wrapper {
  width: 100%;
  float: left;
  overflow: hidden;
}

.main {
  padding: 0 56px 0 296px;
  float: left;
}

.sidebar {
  float: left;
  width: 276px;
  margin-left: -100%;
}

Jak macie propozycje na inne rozwinięcie tego, żeby szablon dopasowywał się do całego okna przeglądarki to napiszcie jak.

Efekt powyższego kodu jest taki, że div.main nie jest na całym ekranie tylko na jego części i rozszerza się w miarę tego jak przybywa w nim elementów. A za ukrycie elementów poza ekranem odpowiedzialny jest div.wrapper, niestety jest to tylko sztuczne ukrycie, bowiem poziomy scrollbar się nie pojawia, i elementy te znikają. W związku z tym.

Problem który w tej chwili mam to umieszczenie długiej tabeli na ekranie (wykres gantta) najlepiej bym chciał żeby zakres diva dopasował się do okna strony, a nie sztucznie go ograniczać, bo na różnych rozdzielczościach to ograniczenie może być za małe lub za duże.

0

sirkruk, pozwóle sobie nie komentować tego co napisałeś.

0

Najprościej z punktu widzenia CSS będzie rozwiązać ten problem dodając dodatkowy element do kodu znaczników. Jeśli Ci to nie przeszkadza, to wrzuć jakiś element, np..main-inner do .main. Usuń padding z elementu .main i przenieś go do .main-inner. Nie dodawaj do main-inner żadnych innych deklaracji.

0

poproszę o przykład

0

Hmm, widzę że ten Twój (dość dziwny) kod w ogóle nie działa. To nie jest tylko problem z paddingami. Bez paddingów też by Ci nie działał. Napiszę to od nowa.

edit:

<!DOCTYPE html>
<html>
<head lang="pl">
  <meta charset="utf-8">
  <title>div z pelna szerokoscia i paddingiem</title>
  <style>
.wrapper {
  overflow: hidden;
  padding-left: 276px;
}

.main-wrapper {
  float: right;
  width: 100%;
}

.main {
  padding: 0 56px 0 296px;
}

.sidebar {
  float: right;
  width: 276px;
  margin-left: -276px;
}
  
    /* to tylko dla debugowania, mozna usunac */
    .main,
    .sidebar {
      height: 100px;
    }

    .main {
      background: red;
    }
    .sidebar {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="main-wrapper">
      <div class="main">
      </div>
    </div>
    <div class="sidebar">
    </div>
  </div>
</body>
</html>

0

słuchaj, szablon już jest utworzony i on działa, tylko ten main nie idzie na cały ekran.

0

I właśnie dlatego nie działa. Ale to nie jest wina paddingów. Sama funkcja "pełnej szerokości" nie działa, nawet po usunięciu paddingów. Zobacz na kod powyżej (edytowałem posta), powinien być OK.

0

działa, wielkie dzięki.

1 użytkowników online, w tym zalogowanych: 0, gości: 1