View New Content

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

DIV na całą wysokość rodzica.

Rozpoczął WebRapko, Jul 19 2014 00:01

15 replies to this topic

Please log in to reply

WebRapko

Użytkownik

97 posts

Czas spędzony online: 12m

-12
Słaba

LocationMalopolska

Posted 19 July 2014 - 00:01

#1

Witam. Czy mogę poprosić o podanie jakiegoś "tricku" w CSS na rozciągnięcie diva na całą szerokość rodzica?(rodzic nie ma stałej szerokości)

0

Back to top

writen

Stary wyjadacz

458 posts

Czas spędzony online: 29d 23h 2m 34s

133
Znakomita!

Posted 19 July 2014 - 00:33

#2

Zdecyduj sie czy chodzi o wysokosc czy szerokosc. Bo temat mowi co innego a tresc posta co innego.

Jesli chodzi o szerokosc to sprawa jest prosta. Div automatycznie sie rozciaga. A jesli nie to wystarczy ustawic szerokosc na 100%
Nie mam pojecia czy z wysokoscia da sie identycznie.

Wysłane z mojego LG-E400

1

Back to top

unbreak

WT Elite

1937 posts

Czas spędzony online: 27d 8h 43m 36s

506
Znakomita!

Location/home/unbreak

Posted 21 July 2014 - 08:00

#3

Jeżeli ustawisz div-owi szerokość 100% to pamiętaj że nie może mieć paddingu, a jeżeli ma to musisz ustawić mu

box-sizing: border-box;

Jeżeli chodzi o wysokość to już więcej zabawy jest.

Edited by unbreak, 21 July 2014 - 08:01 .

1

webDeveloper

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 14:10

#4

A można prosić tą zabawę z wysokością? Bo tytuł mówi właśnie o wysokości i mi by się to przydało ;D

Niestety czasem i z prostymi sprawami sobie nie radzę

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 14:18

#5

Dajesz temu divowi pseudoklasę :after i wklepujesz taki mniej więcej kod:

twój_block:after {
	content: ' ';
	display: block;
	clear: both;
}

Czasami sam clear: both; wystarcza, o ile miałeś ustawiony float.

Nic trudnego .

0

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 14:22

#6

Dajesz temu divowi pseudoklasę :after i wklepujesz taki mniej więcej kod:
twój_block:after {
	content: ' ';
	display: block;
	clear: both;
}
Czasami sam clear: both; wystarcza, o ile miałeś ustawiony float.

Nic trudnego .

Jednak jest coś trudnego bo nie działa..

Chodzi o to, że chce nadać elementowi aside wysokość 100% do containera (rodzica) oraz aside posiada wartość float:left i określoną szerokość, zaś rodzić posiada overflow:hidden.

Dodanie :after do aside powoduje, że dla samego aside style nie działają przez co szerokość zamiast 200px wynosi 100% containera, a tego raczej nie chce.

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 14:37

#7

Chyba robisz to źle- nie zmieniaj aside na aside:after, tylko utwórz nowy selektor, i w nim wklep ww. kod.

Jeżeli dalej nie działa daj jakieś demo- będzie o wiele łatwiej ogarnąć o co chodzi.

0

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 14:42

#8

Ale to ma tak wyglądać:

<aside>
     <div id="blok">
     </div>
     <div class="widget">
     </div>
     <div class="widget">
     </div>
</aside>

czy może:

<aside>
     <div id="blok">
         <div class="widget">
         </div>
         <div class="widget">
         </div>
     </div>
</aside>

W obu przypadkach blok odpowiada temu twojemu twój_blok

Bo wiele razy spotkałem się z tą pierwszą wersją i nie wiem czy o to właśnie Ci chodzi.

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 15:12

#9

Daj jakiekolwiek demo, będzie o wiele łatwiej się dopasować- nie wiadomo, czy tworzysz "2 column layout", czy może jedną kolumnę?

Hmm- a może najciemniej pod latarnią : http://jsfiddle.net/2NZJ5/

0

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 15:21

#10

Demo podać nie podam, ponieważ stronę "tworze" z poziomu PC i dopiero szczegóły będę dopieszczał na serwerze www.

Otóż szkielet strony tak mniej więcej wygląda i są to dwie kolumny:

<html>
<head>
</head>
<body>
<div id="wrapper">
    <header id="header">
    </header>
    <div id="container">
        <section id="content">
        </section>
        <aside id="sidebar">
        </aside>
    </div>
    <footer id="footer">
    </footer>
</div>
</body>
</html>

No i chce nadać wysokość dla aside względem rodzica container. Gdyż nie wiem w której kolumnie będzie zwykle więcej tekstu więc nie chce tego robić względem kolumny obok tylko całego containera.

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 15:28

#11

W takim razie tu masz pierwszy lepszy tutorial "2 column layout":

http://www.456bereas...sslayout/2-col/

A nie możesz wkleić kawałka kodu z aktualnym ostylowaniem tej tajnej strony do jakiegoś dema?

Inaczej ciężko jest Ci pomóc.

0

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 16:09

#12

No masz mnie. Jednak prościej bedzie jeżeli dam demo mojej super tajnej stronki ( ^_^ )

Takie tam sobie demo

aside ma nadany border-left i dlatego chce aby to było na cała wysokość containera.

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 16:18

#13

Echh- na co tyle kombinować?
Wywal ten border-left z <aside>, i ustaw taki sam border-right dla #content .

0

Back to top

wolfdz

Stary wyjadacz

252 posts

Czas spędzony online: 10d 19m 41s

14
Dobra

LocationKraśnik

Posted 21 July 2014 - 16:24

#14

No właśnie, że tak nie może być.

Bo jeżeli aside będzie miało więcej treści niż content to będzie widać do połowy ten border, a ja chce aby był na całą wysokość containera niezależnie od tego, co ma więcej treści. Ponoć da się jquery to załatwić.

0

Back to top

Michał

Stary wyjadacz

301 posts

Czas spędzony online: 16d 7h 11m 3s

95
Znakomita!

Posted 21 July 2014 - 17:12

#15

Źle napisałeś ten kod.
Z nudów poprawiłem Ci go.

łap:

Spoiler

body {
    background:url(images/bg.jpg) center fixed;
    background-size: cover;
    font-family:'Open Sans', sans-serif !important;
}
a,
a:hover {
    text-decoration:none;
}
#wrapper {
    width:960px;
    margin:auto;
}
#wp-header {
    box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    -moz-box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    -webkit-box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    background:url(images/header.jpg) center;
    height:250px;
}
#header-top {
    overflow:hidden;
    margin:auto;
    padding:47px;
}
.logo {
    float:left;
}
.search {
    float:right; 
    margin:30px;
}
#navbar {
    background: url(images/menu.png);
    height: 51px;
}
#navbar ul {
    list-style:none;
    display:block;
    padding:18px 10px 0px 10px;
}
#navbar ul li {
    display:inline;
}
#navbar ul li a {
    color:#fff;
    padding:14px 13px 16px 13px;
}
#navbar ul li a:hover {
    background:url(images/menu-hover.png);
}
#wp-container {
    width:960px;
    box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    -moz-box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    -webkit-box-shadow:4px 0 2px -4px #222 , -4px 0 2px -4px #222;
    background:#fff;
}
#content {
    width: 760px;
    float:left;
}
#sidebar {
    width: 200px;
    border-left:1px dotted #000;
    margin-left: 760px;
}
 
#sidebar:after {
    content: ' ';
    display: block;
    clear: both;
}
 
footer {
    clear: both;
}
 
.category {
    padding:10px;
    border-bottom:1px dotted #000;
    background:url(images/cat.png);
    clear: both;
}
.news {
    height:250px;
    padding:5px;
    border-bottom:1px dotted #000;
    overflow:hidden;
    -moz-transition:0.2s ease-in;
    -webkit-transition:0.2s ease-in;
    -o-transition:0.2s ease-in;
    transition:0.2s ease-in;
    clear: both;
}
.news:hover {
    -moz-box-shadow:inset 0 0 5px 1px #888;
    -webkit-box-shadow:inset 0 0 5px 1px#888;
    box-shadow:inset 0 0 5px 1px #888;
    -moz-transition:0.2s ease-in;
    -webkit-transition:0.2s ease-in;
    -o-transition:0.2s ease-in;
    transition:0.2s ease-in;
}
.thumb {
    float:left;
    position:relative;
    top:50%;
    margin-top:-80px;
    padding-right:10px;
    padding-left:10px;
}
.image {
    width:150px;
    padding:3px;
    border:1px solid silver;
    background-color:#d2d2d2;
}
.description {
    margin-top:50px;
    float:right;
    width:570px;
}
.description h2 {
    font-family:'Oswald', sans-serif;
    font-size:40px;
    padding:0px 0px 10px 5px;
}
.description p {
    font-size:17px;
}
.description p a.read {
    color:#797979;
}
.description p a.read:hover {
    color:#000;
}
.description span.date {
    font-size:13px;
    float:right;
    margin:35px;
}
.widget {
    border-bottom:1px dotted #000;
    padding:12px;
    -moz-transition:0.2s ease-in;
    -webkit-transition:0.2s ease-in;
    -o-transition:0.2s ease-in;
    transition:0.2s ease-in;
}
.widget:hover {
    -moz-box-shadow:inset 0 0 5px 1px #888;
    -webkit-box-shadow:inset 0 0 5px 1px#888;
    box-shadow:inset 0 0 5px 1px #888;
    -moz-transition:0.2s ease-in;
    -webkit-transition:0.2s ease-in;
    -o-transition:0.2s ease-in;
    transition:0.2s ease-in;
}
.widget h3 {
    text-align:center;
    font-family:'Oswald', sans-serif;
    font-size:20px;
    margin-bottom:10px;
}
.widget p {
    font-size:14px;
}