/    Sign up×
Community /Pin to ProfileBookmark

CSS to make the container DIV to cover full page

Copy linkTweet thisAlerts:
May 14.2017

Hello

I am trying to convert this template ([url]https://codepen.io/drehimself/pen/KdXwxR[/url]) so that:

1) The container DIV’s height and width is 100%.

2) If the member list exceeds the screen size then a vertical scroll will appear so that the user can scroll through the rest of the member list.

3) And lastly the textarea where the user types their message should be visible all time. Currently the user has to scroll down to see the textarea.

I have managed to do the 1st point but not able to accomplish point 2 and 3

Can someone please help?

Here is my fork link [url]https://codepen.io/phantom007/pen/GmdVRm[/url]

Thanks in advance

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZorgMay 15.2017 — #2 Add overflow: auto to .people-list ul

[code=html]
<style>
.people-list ul {
padding: 20px;
height: 770px;
overflow: auto;
}
</style>
[/code]

#3 the textarea is visible, I guess you can change the height of the [I].chat .chat-history[/I] and the [I].people-list ul[/I] selectors to suit your page.
×

Success!

Help @phantom007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...