Search code examples
htmlcssiframe

HTML: Iframe not loading properly


section.defaultthread{
    white-space: pre-line;
    font-family: 'Chivo Mono';
    font-size: 1.5vw;
    background: white;
    border-bottom: 1px gray dashed;
    padding-top: 4%;
    padding-bottom: 4%;
    position: relative;
}

iframe.defaultthread{
    white-space: pre-line;
    font-family: 'Chivo Mono';
    font-size: 1.5vw;
    background: white;
    border-bottom: 1px gray dashed;
    width: 100%;
    position: relative;
    border: none;
}
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../CSS/cssdata-alergie.css" type="text/css">
        <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100&display=swap" rel="stylesheet">
        <link rel="icon" href="../RESOURCES/promise.png">
        <meta name="subject" content="Allergy student project">
        <meta name="author" content="">
        <meta name="language" content="pl">
        <meta name="owner" content="">
        <meta name="url" content="https://shatterwares.com">
        <meta name="coverage" content="Worldwide">
        <meta name="rating" content="General">
        <meta name='HandheldFriendly' content='True'>
        <title>Alergie: projekt</title>
    </head>
    <body style="width: 100%; margin: 0; overflow: hidden;"> 
    <section class="defaultthread">
        <h1 class="lefth1">Reakcja alergiczna</h1>
        <p class="paragraphleft">Reakcja alergiczna - złożona odpowiedź układu immunologicznego na kontakt z alergenem. Polega na wytwarzaniu specyficznych substancji białkowych (głównie immunoglobulin klasy IgE) oraz pobudzaniu limfocytów T, co podczas kolejnego po pierwszym kontakcie z alergenem prowadzi do rozwoju stanu zapalnego. Jest on efektem uwolnienia w trakcie przebiegu reakcji alergicznej substancji chemicznych (histamina, leukotrieny, cytokiny i inne) odpowiedzialnych za wystąpienie objawów alergii.</p>
        <div class="center">
            <img class="responsiveimage" src="../RESOURCES/leki2.png" alt="macrophage">
        </div>
    </section>
    </body>
</html>

Site @ here

I had wanted to make a self-adjustable iframe element, working just like section.defaultthread - you know, content adjusts everything, nothing hardcoded. Though i can't make it work. The iframe breaks the footer's placement, takes unnecessary space, produces unnecessary spaces and so on.

Really can't seem to figure it out. Had tried to nullify the margins, make its size to be in some aspect ratios, set height, nothing.

EDIT: Please, in Google Dev console, disable the set height for the iframe. I despise it and for some reason git doesn't want to get rid of it


Solution

  • Check this screenshot

    Use URL instead direct html file, and add CSS width: 100% and height around 800 to 850