CODEWITHSUNDEEP
css
dclark
dclark

Reputation: 371

How do I maintain div height when font changes?

I am trying to use the same space on a page (a div with the ID "header") to display two text strings with different fonts. I am using a simple JQuery animation to switch between the two -- the first one fades in, then fades out, and then the second one fades in. As I said, the two text strings use different fonts, but I would like them to take up the same amount of vertical space on the page. Unfortunately, I can't figure out how to make the containing div maintain a consistent height in a way that is also responsive.

If I use min-height with a pixel value, the strings share the same vertical space, but when you resize the window, the spacing becomes unbalanced.

When I use min-height with a percentage, it completely ignores min-height, and the "header" div resizes when the font of the visible text changes.

How can I make the "header" div take up a consistent size (say, 40%) without using a hard-and-fast pixel size?

Here's my HTML/CSS/JavaScript:

$(document).ready(function() {
    var fadeSpeed = 2000;
            
    $("#font1").delay(1000).fadeIn(fadeSpeed);
    $("#font1").fadeOut(fadeSpeed, function() {
	    $("#font2").fadeIn(fadeSpeed, function () {
      });
    });
});
@import url("https://fonts.googleapis.com/css?family=Oswald:400,700,300");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
@import url("https://fonts.googleapis.com/css?family=Anton");

div {
    border: 1px solid black;
}

#logo {
    font-family: 'Luckiest Guy';
    font-size: 80px;
    font-size: 8.5vw;
}

#font1 {
    font-family: 'Anton';
    font-size: 100px;
    font-size: 10.5vw;
    display: none;
}

#font2 {
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
    font-size: 2.5vw;
    display: none;
    padding-top: 5%;
    padding-bottom: 4%;
}

#container {
    margin: 0 auto;
    height: 0 auto;
    width: 100%;
}

#header {
    border: 2px solid red;
    min-height: 40%;
    /* min-height: 150px; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id='container'>
        <div id='header'>
            <div id='font1'>
                <center>big font</center>
            </div>
            <div id='font2'>
                <center>small font</center>
            </div>
        </div>
        <div id='logo'>
            <center>logo text</center>
        </div>
    </div>
</body>

Upvotes: 0

Views: 720

Answers (2)

Nieminen
Nieminen

Reputation: 1284

I believe the snippet below does what you want. If you set the line height of both of the text pieces the same, then as far as their container is concerned, they're the same size. I used px, you should easily be able to use whatever measurement you want.

$(document).ready(function() {
    var fadeSpeed = 2000;
            
    $("#font1").delay(1000).fadeIn(fadeSpeed);
    $("#font1").fadeOut(fadeSpeed, function() {
	    $("#font2").fadeIn(fadeSpeed, function () {
      });
    });
});
@import url("https://fonts.googleapis.com/css?family=Oswald:400,700,300");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
@import url("https://fonts.googleapis.com/css?family=Anton");

div {
    border: 1px solid black;
}

#logo {
    font-family: 'Luckiest Guy';
    font-size: 80px;
    font-size: 8.5vw;
}

#font1 {
    font-family: 'Anton';
    font-size: 100px;
    font-size: 10.5vw;
    display: none;
    line-height: 100px;
}

#font2 {
    font-family: 'Indie Flower', cursive;
    font-size: 20px;
    font-size: 2.5vw;
    display: none;
    line-height: 100px;
}

#container {
    margin: 0 auto;
    height: 0 auto;
    width: 100%;
}

#header {
    border: 2px solid red;
    height: 40% !important;
    /* min-height: 150px; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id='container'>
        <div id='header'>
            <div id='font1'>
                <center>big font</center>
            </div>
            <div id='font2'>
                <center>small font</center>
            </div>
        </div>
        <div id='logo'>
            <center>logo text</center>
        </div>
    </div>
</body>

Upvotes: 0

sadpanda
sadpanda

Reputation: 213

You can assign both elements the same height or line-height in CSS to keep the elements the same size

Upvotes: 1

Related Questions