fixed header, scrolling bottom

Giganews Newsgroups
Subject: fixed header, scrolling bottom
Posted by:  Eli the Bearded (..@eli.users.panix.com)
Date: Mon, 19 Aug 2019

I've got a page that implements a very traditional CGI with an output
style something like more modern AJAX forms. I divide the output into
two DIVs, a top one with the form and a bottom one with the CGI results.

It works well for me in my default browser configuration, but with
different settings (eg font size) the two DIVs overlap each other.

This is a simplified version of the real thing, that implements a very
simplistic form which should provide an adequate example:

https://qaz.wtf/ind/scroller/

I'd like to know how to fix my CSS so that the top control DIV
(id="topdiv") always has enough room to display without the DIV itself
having a scroll bar. (In extreme cases, the page having a scroll bar to
see the DIV is okay.) At the same time I'd like the bottom results
DIV (id="resultdiv") to not overlap the topdiv, and fill the rest of the
(non-extreme cases) page with a scrollbar when needed to handle content
that won't fit.

For reference, here's the page without any CGI results:

    <html>
    <head>
    <title>Word Finder</title>

    <style type=text/css><!--
    Body {background:white; color: black; }
    H1 { font-weight: bold; font-size: 18px }
    H2 { font-weight: normal; font-size: 18px }
    .warn { color: red; }
    .success { color: blue; }
    .reformat { color: green; }
    :link { color: blue; }
    :link:hover {color:red;}
    :link:visited {color:red;}
    #topdiv {
      position: fixed;
      top: 0;
      height: 15%;
      width: 100%;
      z-index: 1000;
    }
    #formdiv {
      position: absolute;
      left: 0;
      width: 80%;
    }
    #intro {
      width: 50%;
    }
    #again {
      position: absolute;
      right: 0;
      width: 20%;
    }
    #resultdiv {
      position: absolute;
      top: 16%;
      bottom: 0;
      width: 98%;
      overflow-y: auto;
      z-index: 10;
    }
    --></style>

    </head>
    <body>

    <div id="topdiv">
    <h1>Word Finder</h1>

    <div id="formdiv">
      <form method=GET action="/ind/scroller/index.cgi">
      <label for=in_source>Source string</label>
      <input id=in_source type=text name=source size=40 value="">
      <br>

      <label for=in_scratch>Scratchpad</label>
      <input id=in_scratch type=text name=scratch size=40 value="">
      <br>

      <label for=in_min>Minimum candidate word length</label>
      <input id=in_min type=text name=min size=2 value="3">
      <label for=in_max>and maximum</label>
      <input id=in_max type=text name=max size=2 value="10">
      <input type=hidden name=original value="">

      <input type=submit value="Work on it">
      </form>
    </div>

    <div id="again">
      <a href="/ind/scroller/index.cgi">Start Over</a>
    </div>

    </div>

    <div id="resultdiv">

    <div id=intro>
    <h2>Introduction</h2>
    <p>This is a tool to help find words, eg for a crossword.
    </p>
    <p>You can enter a substring, akin to a regular expression. Here <tt>.</tt>
      matches a single character and <tt>.*</tt> matches zero or more
      characters. No other regular expression features are supported.
    </p>
    <p>The scratchpad is a text box which is not modified or used, but simply
      there to hold notes.
    </p>
    </div>

    </div>
    </body>
    </html>

Thanks,

Elijah
------
has found this 2012-era form a bit more awkward in a phone browser

Replies