CSS sector targeting error for nested DIVs

1 reply [Last post]

Sun, 2020-07-05 18:10

w2tq

Offline

newbie

Last seen: 4 weeks 5 days ago

Timezone: GMT-4

Joined: 2020-07-05

Posts: 2

Points: 3

I am familiar with the concept of inheritance but cannot determine how to fix my CSS. Because I'm using an iframe tag, it appears that unless I set the desired height attribute for head, body, div (the one marked with ID #content), and iframe to 98% (or any other desired number), the presentation collapses. Each tag seems to requires the height attribute. (This is my first use of the iframe tag.)

When I tried to introduce another div for the two anchors - nested within the #wrapper div and at the same rank as #content, it too inherited the 98% height attribute. All of my attempts to specifically target the #content div failed. The current code seems to work only if the height attribute is assigned to div (i.e., all divs).

Here is my code:

HTML:
 
<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Title</title>
    <meta charset="utf-8"/>
    <link href="/style-ebook.css" media="screen" rel="stylesheet" type="text/css" />
    /*     etc. */
    </head>
<body>
    <div id="wrapper">
        <div id="content">
            <p><a href="/sub/ch01.shtml">Top</a></p>
            <p><a href="/00-ToC.shtml">Table of Contents</a></p>
            <iframe src="/html/ch01.html"></iframe>
            </div>
		</div>
    </body>
</html>
 
* * *
 
CSS:
 
html {
    overflow: auto;
}
#wrapper {
	width: 100%;
	max-width:40.0em;
	margin:0 auto;
}
html, body, div, iframe  {
    height: 98%;
}
iframe {
    display: block;
    width: 100%;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
}

Tags:

Mon, 2020-07-06 11:51