Question

Anybody Good with CSS, I got a challenge ):

Answer 1

So The initial height of a web page is 100%, and I want 3 rectangle shaped elements to be the same height while filling the entire height of the page.

Answer 2

@extrinix

Answer 3

@ultrilliam

Answer 4

oh i forgot to mention im using textareas

Answer 5

You want the textareas to be the height of the page?

Answer 6

3 seperate textareas to be the exact same height and fit the page

Answer 7

but then i run into an issue where the text in the textarea gets cut off at the bottom

Answer 8

Would it be better to use a span element with contenteditable?

Answer 9

Well you could do an html like
```html
<textarea id="ce1" class="ce" />
<textarea id="ce2" class="ce" />
<textarea id="ce3" class="ce" />
```

With your css looking something like this maybe?
```css
#ce1{
height:100%;
width:30%;
margin-left:2%;
}
#ce2{
height:100%;
width:30%;
margin-left:2%;
margin-right:2%;
}
#ce3{
height:100%;
width:30%;
margin-right:2%;
}
.ce{
display:inline-block;
}
```


I don't know if that's exactly it, but it's what I seem to remember ¯\_(ツ)_/¯

Answer 10

no

Answer 11

i want the textareas to be on top of each other

Answer 12

On top of each other? May I ask what for-

Answer 13

code editor

Answer 14

i have a new design idea

Answer 15

Ah okay

Answer 16

Are you trying to get the options to swap out for each other?

Answer 17

still need help?

Answer 18

@spectrum now that I take another look at this, you want an tab style? Where you can switch between which one you're currently showing (HTML, CSS, or JS)

Answer 19

I would try something using jQuery's plugin jQuery UI, and use the Tabs widget, link to that is listed below.

https://jqueryui.com/tabs/#default

Answer 20

I wish I was good with CSS