6 Replies - 652 Views - Last Post: 29 April 2013 - 04:53 AM

#1 aaronellington  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 03-April 09

Toolbar Variable Height Layout

Posted 28 April 2013 - 07:12 PM

Basically I'm trying to make a basic app like website where there is a toolbar at the top that it's height is determined by it's contents, and then have the content of the page take up the remaining window height (as shown in the image bellow)

I'm trying to keep it purely in CSS. I just need a push in the right direction.

Thanks in advance for the help.

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Toolbar Variable Height Layout

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3328
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 01:23 AM

You could play with this:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
            background: green;
        }
        #toolbar {
            height: 10%;
            font-size: 150%;
            background: blue;
        }
    </style>
</head>
<body>
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</body>
</html>

But you can't get the font to stretch, fonts don't work that way :rolleyes:. At least, not without some Javascript or CSS3 trickery.

But, remember, a web page is not a desktop application and you will lose a lot of hair if you try to make it so >.<
Was This Post Helpful? 2
  • +
  • -

#3 aaronellington  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 03-April 09

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 03:14 AM

Thanks for the reply, but that not exactly what I'm looking for.

I know CSS text cant resize itself but as I said in my first post I want the toolbar to have it height decided by how large the content(text) is.

The code below is closer to what I want. But I don't want to have to set the height of #toolbar or the top position of #content.

I want #toolbar to be able to have a dynamic height depending on how big I make the font in #toolbar.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
        }
        #toolbar {
            height: 32px;
            background: blue;
        }
        #content {
            overflow:auto;
            position: absolute;
            top 32px; bottom: 0px; left: 0px; right: 0px;
        }
    </style>
</head>
<body>
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</body>
</html>


View Postandrewsw, on 29 April 2013 - 04:23 AM, said:

You could play with this:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
            background: green;
        }
        #toolbar {
            height: 10%;
            font-size: 150%;
            background: blue;
        }
    </style>
</head>
<body>
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</body>
</html>

But you can't get the font to stretch, fonts don't work that way :rolleyes:/>/>. At least, not without some Javascript or CSS3 trickery.

But, remember, a web page is not a desktop application and you will lose a lot of hair if you try to make it so >.</>/>

This post has been edited by aaronellington: 29 April 2013 - 03:15 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3328
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 03:35 AM

You have an error in your css: top: 32px;

Why are you using absolute positioning? IMO, this should be a last resort. In particular, because the content will follow the toolbar naturally, in the document order.

Quote

I want #toolbar to be able to have a dynamic height depending on how big I make the font in #toolbar.

Erm, increasing the font size in #toolbar will (again, naturally) increase the height of #toolbar.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
        }
        #toolbar {
            background: blue;
            font-size: 20px;
            line-height: 2em;
        }
    </style>
</head>
<body>
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</body>
</html>

Sorry, I don't follow. But good luck! Andy.
Was This Post Helpful? 2
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3328
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 03:49 AM

Actually, I can make the font-size stretch in the toolbar, making the height of this element taller at the same time, by using a wrapper div and font-size: larger.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
        }
        #wrapper {
            font-size: 20px;
        }
        #toolbar {
            background: blue;
            font-size: larger;
            line-height: 2em;
        }
    </style>
</head>
<body>
<div id="wrapper">
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</div>
</body>
</html>


Increasing the font-size for the wrapper will proportionately increase the font-size of both the content and toolbar elements.

My last attempt :)
Was This Post Helpful? 1
  • +
  • -

#6 aaronellington  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 03-April 09

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 04:51 AM

View Postandrewsw, on 29 April 2013 - 06:49 AM, said:

Actually, I can make the font-size stretch in the toolbar, making the height of this element taller at the same time, by using a wrapper div and font-size: larger.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0; border: 0; margin: 0;
        }
        #wrapper {
            font-size: 20px;
        }
        #toolbar {
            background: blue;
            font-size: larger;
            line-height: 2em;
        }
    </style>
</head>
<body>
<div id="wrapper">
<div id="toolbar">The Toolbar</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus eros quis arcu
scelerisque vel venenatis felis congue. Nulla vitae nibh augue. Nam interdum leo ut erat cursus
a consequat nibh luctus. Donec ut enim mi, eu porta lorem. Sed porta urna augue. Donec varius
ultricies magna, non condimentum est eleifend at. Sed nisl est, aliquam eu commodo ac, hendrerit
vitae neque. Pellentesque consequat velit nec tortor cursus ac consectetur nibh consectetur.
Proin imperdiet risus ac mauris euismod malesuada tempus sapien gravida. Nunc ut lobortis nisl.</p>
</div>
</div>
</body>
</html>


Increasing the font-size for the wrapper will proportionately increase the font-size of both the content and toolbar elements.

My last attempt :)/>


Sorry, still not what I'm looking for. I think that what I am trying to do is not possible with just CSS. Thanks anyways!
Was This Post Helpful? 1
  • +
  • -

#7 PAHS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 27-April 13

Re: Toolbar Variable Height Layout

Posted 29 April 2013 - 04:53 AM

i found this pretty helpful since im new to html :bananaman:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1