Height Auto - Calculated Height Is Incorrect So Background Is Not Working - ASP.NET 4.0 - Master Page Used

Height auto - calculated height is incorrect so background is not working - ASP.net 4.0 - Master Page Used

To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:

Use JavaScript to calculate the height.
Don't use absolute positioning.

There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.

You're going to need a lot of float: left and float: right.

Change the style of a content placeholder when using a master page

Solution #1: CSS

If this is a CSS issue and you are simple finding a gap around your content, you'll likely need to adjust the way you're styling your divs. Try giving the container div (the one around the table that holds the background color) this class:

.container-div 
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:100px;
}

This assumes you want a 100px gap at the top of your container div.

Solution #2: Change background with jQuery

Add a script tag within the tag in your content page. Within the script tag, place a jQuery code to change the class of the appropriate background layer. The following example assumes your background

Example:

Master page HTML

<body class="default-bg">
    <p>This is your content outside the ASP content place holder.</p>

    <asp:ContentPlaceHolder runat="Server" ID="ContentPlaceHolder1">
    </asp:ContentPlaceHolder>
</body>

Content page HTML

    <script>
        $(function(){
            $('.my-background-layer').removeClass('default-bg').addClass('alternate-bg');
        )};
    </script>

    <div>
        <table id="mainDisplay">
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
        </table>
    </div>
</asp:Content>

CSS

.default-bg {background:white;}
.alternate-bg {background:grey;}

Keep in mind that ContentPlaceHolders are designed to only replace segments of code within the master page. A good technique I follow is to place at least two ContentPlaceHolders in the header section of your master page.

The first is for your default CSS and Javascript references, while the second is for additional content page references. If you leave out these ContentPlaceHolders from your content page, the default settings from your master page will take effect. However, if you want to change either the main CSS or Javascript references, you need only add an tag for that ContentPlaceHolder and add your code for that content page.

How to implement jQuery

I figured you might need a little crash course in how to install jQuery since you mentioned you dislike javascript (you'll have to learn it sooner or later btw). Here is a link to decent instructions:

Implementing jQuery (Stack Overflow)

In C# / .NET the Graphics.MeasureString method gives an incorrect height

Your MeasureString call specifies a maximum width of 300 for the string. This means that your very long string is split up into multiple lines, which causes the higher calculated height of the string.

Note that the maximum width of the string is not in characters, but in pixels.

Make Iframe to fit 100% of container's remaining height

Update in 2019

TL;DR: Today the best option is - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. Here is a code sample for flexbox:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

Should you design HTML and CSS layouts using primarily margin/padding or positioning?

For a typical page layout, Example 1 is much cleaner and you should choose that, given the choice.

Example 2 is bad because as soon as you start setting position: absolute on everything, any flexibility your design may have had goes out the window. You have to set explicit dimensions on everything.

In general (there are exceptions), avoid position: absolute for the main layout unless it's only way to do it.

Here's an example of the kind of problem I was talking about. It would appear that the user ended up using JavaScript to fix his problems. Not good.

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

http://jsfiddle.net/UF3mb/10/

Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

c# Image resizing to different size while preserving aspect ratio

I found out how to resize AND pad the image by learning from this this CodeProject Article.

static Image FixedSize(Image imgPhoto, int Width, int Height)
    {
        int sourceWidth = imgPhoto.Width;
        int sourceHeight = imgPhoto.Height;
        int sourceX = 0;
        int sourceY = 0;
        int destX = 0;
        int destY = 0;

        float nPercent = 0;
        float nPercentW = 0;
        float nPercentH = 0;

        nPercentW = ((float)Width / (float)sourceWidth);
        nPercentH = ((float)Height / (float)sourceHeight);
        if (nPercentH < nPercentW)
        {
            nPercent = nPercentH;
            destX = System.Convert.ToInt16((Width -
                          (sourceWidth * nPercent)) / 2);
        }
        else
        {
            nPercent = nPercentW;
            destY = System.Convert.ToInt16((Height -
                          (sourceHeight * nPercent)) / 2);
        }

        int destWidth = (int)(sourceWidth * nPercent);
        int destHeight = (int)(sourceHeight * nPercent);

        Bitmap bmPhoto = new Bitmap(Width, Height,
                          PixelFormat.Format24bppRgb);
        bmPhoto.SetResolution(imgPhoto.HorizontalResolution,
                         imgPhoto.VerticalResolution);

        Graphics grPhoto = Graphics.FromImage(bmPhoto);
        grPhoto.Clear(Color.Red);
        grPhoto.InterpolationMode =
                InterpolationMode.HighQualityBicubic;

        grPhoto.DrawImage(imgPhoto,
            new Rectangle(destX, destY, destWidth, destHeight),
            new Rectangle(sourceX, sourceY, sourceWidth, sourceHeight),
            GraphicsUnit.Pixel);

        grPhoto.Dispose();
        return bmPhoto;
    }

Is it still relevant to specify width and heigth attribute on images in HTML?

An img element has width and height attributes, but they're not required under any DOCTYPE.

Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.

It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.

You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.

Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.

Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?

Adjust width and height of iframe to fit with content in it

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Make the BODY DIV Fill the Available Area

Just snap the header and footer at the bottom of the page using fixed positioning.

header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }

Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.

div#body{ background:none; }
body{ background:#eee; }

This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.

header, footer{ background:#fff; }

By the way I would suggest removing body margins. body{ margin:0; }

Height Auto - Calculated Height Is Incorrect So Background Is Not Working - ASP.NET 4.0 - Master Page Used