6

I have a div inside another div with specific width but I want the child div to have width in percentage with browser screen size not in percentage with its parent div, meaning when I set the width of the child div to 50%, I want its size to be 50% of the browser screen not 50% of its parent element, I don't want to remove it from the parent-child its important, any way to achieve this without removing it from being a child ?

P.S- Please no answer in JQuery. Either CSS or Javascript. If it is achievable by css it would be really great, but javascript will also be fine.

Rohan Negi
  • 65
  • 4
  • Please provide the code. Anyhow, you can specify width in viewport percentages like 50vh == 50% of the browser screen's height or 30vw == 30% of the browsers screen's width – lipp May 30 '16 at 07:38

2 Answers2

5

You can use VW (ViewPort Width). Example :

.child {width : 50vw}
Rey Musa
  • 122
  • 6
  • 1
    Should also note that a popular cross browser stat site puts vm support at around 78% http://caniuse.com/#feat=viewport-units – digout May 30 '16 at 07:41
  • I want it to set it around 95vw ? Will it create problem ? – Rohan Negi May 30 '16 at 07:46
  • No but just understand that real world stats say 22% of people are using browsers that don't support vm. – digout May 30 '16 at 07:48
  • I think I don't have to worry about that, I just have to give this to someone as a prototype kind of thing.. But just for more information about this matter, if it were to be a real website and considering this 22% people + not removing the parent/child relationship, are there any other ways to solve this problem ? – Rohan Negi May 30 '16 at 07:51
  • @RohanNegi In what context do you mean this 'parent child' relationship. Just in the way of the DOM structure? – digout May 30 '16 at 07:55
  • Yeah, In a DOM structure. One inside another. – Rohan Negi May 30 '16 at 07:56
  • Actually that's not accurate, but indeed it's not a wrong statement. Many of them use it for just 'preview' but many of them get it on live. Means, not a big deal. – Rey Musa May 30 '16 at 07:57
  • This vw did the trick.. Actually I just started learning front end one or two weeks ago, but this community is really helpful thank you all. – Rohan Negi May 30 '16 at 08:02
0

You should set your child div to position:fixed This is relative to the size of the view port.

#child {
  position: fixed;
  width: 100%;
}
yeouuu
  • 1,863
  • 3
  • 15
  • 32