Usunięcie dolnego suwaka ze strony jeśli obramowanie poszerzyło stronę

@ **Karol_Pisarek** | **24.01.2017**

1
15
527

W arkuszu stylów dodałem sobie obramowanie sekcji artykułu. Niestety z racji, że artykuł jest ustawiony, aby wypełniał stronę w 100%, po dodaniu obramowania 1px, na dole strony pojawił mi się suwak (scrollbar). Jak mogę się go pozbyć abym nadal miał wypełnienie 100% i obramowanie, bez potrzeby ustalania szerokości strony na sztywno?

article.tabs { 
position: relative; 
display: block; 
width: 100%; 
font-size: 1em;
}

article.tabs section { 
position: absolute; 
display: block;
top: 1.8em; 
width: 100%; 
background-color: #ddd; 
border-radius: 5px; 
border-style: solid; 
border-color: #ddd; 
border-width: 1px; 
box-shadow: 0 3px 3px rgba(0,0,0,0.1); 
z-index: 0;
}

Zapytał
@ Piotr_Czyż | 27.08.2014
- laureat
- 16
- 5
- 24

Komentarze (2)

Niestety po dodaniu kodu CSS, Quorum zamieniło go na zwykły text :(

Skomentował : @ Piotr_Czyż ,27.08.2014

16
5
24

4

Podejrzewam, że gdzieś tam wyżej w kodzie, we fragmencie, który nie został tu skopiowany - jest użyta dla jakiegoś elementu właściwość {overflow: auto;}

Ona powoduje wyświetlenie suwaczków. Może też być: {overflow: scroll;} - ale to już mniej prawdopodobne.

Jak nadamy jakiemukolwiek elementowi nadrzędnemu właściwość {overflow: auto;} to pojawi się suwaczek poziomy na dole tego elementu nawet wtedy, kiedy element będzie miał dobrą szerokość, ale któryś z jegoś elementów potomnych zacznie się za bardzo "rozpychać" w szerokości. Podejrzewam, że właśnie coś takiego się stało, bo border jest wliczany do całkowitej szerokości elementu, więc szerokość elementu to 100% plus grubość ramki. Idealna sytuacja, żeby włączył się overflow. Być może wcale nie trzeba deklarować tych 100%, article to element blokowy, więc i tak wypełni sobą całą szerokość elementu macierzystego.

Poprosiłbym o kompletny plik CSS i HTML-a w załączniku. (najlepiej w ZIP-ie, wtedy nic się nie posypie). Będzie mi łatwiej zlokalizować winowajcę.

Pozdrawiam

Andrzej Słodownik

Komentarze (1)

Odpowiedział
@ | 28.08.2014
TRENER ALTKOM AKADEMII

Komentarze

Warto przyjrzeć się też opcji pozwalającej na kontrolę suwaków poszczególnych osioverflow-x https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-xoverflow-y https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

Skomentował : @ PawelBrzozowski ,12.10.2014

6
0
1

Pytanie