Work with html-element width when change scale of browser

Question

I have the folowing html-murkup structure:

<div class="wrapper">
     <div class="my_line"></div>
</div>

Wrapper has width 1200 px. I want to make div.my_line to has width 100% of screen when user change scale of screen. How can I do this? I try to use background-repeat, I am new in frontend, can somebody help me?

could you explain further "_when user change scale of screen_"? — Fabrizio Calderan, Apr 20 '15 at 11:08
The link may helps you. Change height parts with width: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — onurbaysan, Apr 20 '15 at 11:15
On which resolution or screen width you want to see it 100%? — Imran, Apr 20 '15 at 11:21

score 1 · Accepted Answer · answered Apr 20 '15 at 11:16

So just guessing here but you want the my_line div to stretch 100% of the width once the screen is at 1200px?

If so you'd use this:

/* Check the screen width, in this case looking for the screen to reach 1200px or below. Then extend the my_line div to 100% */
@media (max-width: 1200px) {
  .wrapper .my_line {
    width: 100%;
  }
}

Joel Almeida · Answer 2 · 2015-04-20T11:26:43.707

1

So, if you want the my_line to be the same size as the wrapper and shrink when you resize the window use this approach :

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.wrapper .my_line {
    width: 100%;
}

That way wrapper will have 100% of the browser but be limited and always centered. While the my_line will inherit the full width.

So, when you resize, to less than 1200px the wrapper and my_line will shrink with the window.

EDIT:

If you want the my_line to be bigger than the wrapper, why placing it inside the wrapper ? Just place it above or underneath of the wrapper.

The solution you got works anyways if you change the HTML. The problem with your solution is that if you later add position: relative to the wrapper it won't work. While if you change the HTML structure so that my_line is direct children of the body it will still work.

edited Apr 20 '15 at 11:26

answered Apr 20 '15 at 11:16

Joel Almeida

7,939
5
25
51

Fixed, missing the space in the selectors. Ty. – Joel Almeida Apr 20 '15 at 11:18
Ok..but now the internal div will also be limited to 1200px. – Paulie_D Apr 20 '15 at 11:19
I think that's what OP is trying to achieve but keep it on resize to full-width of the browser. – Joel Almeida Apr 20 '15 at 11:19
Nope...he wan's it 100% width of the screen **regardless** of the wrapper's width. Anyway, he's answered his own question. – Paulie_D Apr 20 '15 at 11:21
Oh i see.. Got the question wrong. Fixing the answer. – Joel Almeida Apr 20 '15 at 11:23

score 0 · Answer 3 · answered Apr 20 '15 at 11:19

0

Thanks guys, I do this and it help:

.my_line {
    position:absolute;
    width: 100%;
    left:0;
    right:0;
    height: 3px;
}

answered Apr 20 '15 at 11:19

nowiko

2,507
6
38
82

this is going to be always 100% while in your question you have mention when user resize browser. – Imran Apr 20 '15 at 11:23

Work with html-element width when change scale of browser

3 Answers3

EDIT: