CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 312

Can I set the height of a div to be flexible?

I hope this isn't too vague of a question, but I feel like I'm running into a brick wall, so I'd really appreciate any and all feedback.

In a nutshell, what I'm trying to do is create a simple webpage, wherein the content is maintained by someone else (who has very little coding knowledge). My thought was to set up a page with a big frame in the middle, and to have tabs up top that would change the content in the frame. (This way, the person who maintains the page will only need to worry about the individual pages that are displayed in the frame; they'll never have to make changes to the main webpage itself.) So far, I've gotten this to mostly work pretty well.

The problem I'm having is with the height of the frame. More accurately, I'm having a problem with the div it's inside of. I'd like it to be adjustable - based on the height of the content it's pulling in - but I can only seem to set the height manually. The reason I want it adjustable is because the content it's pulling in for each tab is going to vary.

Thank you in advance for any suggestions you may have... even if it's to tell me to try another solution altogether. My main goal here is to create something that can be maintained by someone who doesn't really know any html. I figured using a frame would be perfect, since they could update that piece in Word, but there may be some other method I'm not thinking of. I'm open to all suggestions.

*edit: Here's some sample code.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>

<body>

<div id="wrapper" style="text-align: center;">
    <div id="menubar" style="display: inline-block;text-align: center;">
                                     <a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
        </h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
        </h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
        </h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
        </h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
        </h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
        </h6></div></a>
    </div><br />

    <div id="maincontent">
        <iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 453

Answers (3)

WitHeld
WitHeld

Reputation: 349

If you use iframe you can dynamically adjust the size of the iframe to fit the content using javascript as follows:

var iframe = document.getElementById(iFrameId);
    iframe.width = iframe.contentWindow.document.body.offsetWidth;
    iframe.height = iframe.contentWindow.document.body.offsetHeight;

Edit:

You can try to see if this will work:

<script>
   function resizeIFrame() {
      var iframe = document.getElementById("MainFrame");
          iframe.width = iframe.contentWindow.document.body.offsetWidth;
          iframe.height = iframe.contentWindow.document.body.offsetHeight;
   }
</script>

<div id="maincontent">
   <iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>

This is what my iframe*.htm files looks like as an example:

<!DOCTYPE html>
    <html>
        <head>
            <title>iframe</title>
            <style type="text/css">
                body {
                    padding:0px;
                    margin:0px;
                    box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    float:left;
                    border:1px solid rgb(200,200,200);
                }
            </style>
        </head>
        <body>
            <div style="float:left; width:160px; height:500px;">Frame</div>
        </body>
    </html>

Important: when testing this you must run these files through a web server and have the files in the same domain otherwise your browser will block the request due to security issues. If you have Chrome installed you will see the following error message when you view the javascript console: enter image description here

Upvotes: 2

RichS
RichS

Reputation: 943

As long as the div has an id, it's height can be updated in an included css file.

your_page.html:

<link rel="stylesheet" href="your_style.css" /> 
<div id="your_frame">
[Frame Contents]
</div>

your_style.css:

#your_frame{
  height: 40px // Just tell your developers to change this number (they'll never have to open the html file).  Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}

Depending on the scenario, you can use javascript to set the height more intelligently.

EDIT: Here's an approach that requires even less maintenance: The div inside of your html page:

<div id="your_frame">
    <div id="your_contents">
    Contents Go Here
    <br>    
    <br> More Contents
    <br> Even more contents
    </div>
</div>

The css:

#your_frame{
    border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net
    #height:100px;     #  <-- omit the height (let the div auto-size/auto-wrap the contents)
}

#your_contents {
     #height:100px;   #  <-- omit the height (let the div auto-size/auto-wrap the contents)
     margin-top:10px; #  <-- I think what you're really after is the margin adjustments
     margin-bottom:10px;
     margin-left:10px;
}

Upvotes: 1

Roy Gabbard
Roy Gabbard

Reputation: 11

By default a div will automatically extend to the height of its parent container. Changes in this behavior often relate the the position property of its children. For instance if all of a divs children are absolutely positioned the height of the div will be at its default height. I don't have an example of what you are doing so I can only guess at the cause of your issue.

Alternatively, if you are open to alternatives. The scenario that you present is typically solved by the use of Content Management Systems. You would just need to customize the look and feel for your purposes.

http://en.wikipedia.org/wiki/Web_content_management_system

Upvotes: 0

Related Questions