Sun, 2020-07-05 18:10
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; }
Mon, 2020-07-06 11:51
#1
I recognize that I could drop
I recognize that I could drop the #wrapper div, move the #wrapper css to the body, and then encompass the anchor elements in a separate div, but I prefer to retain the wrapper structure and learn what is needed to separately target the nav and content divs (or otherwise prevent the iframe from collapsing).
