drzdu44226
2016-09-09 08:14
浏览 56
已采纳

有css div高度百分比的问题

Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.

I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.

The following is my html-markup:

<!DOCTYPE html>
<html>
  <head>
    <link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">

    <title><?=$GuestbookTitle ?></title>
  </head>

  <body>
    <div id="wrap_main">

      <div class="menubar">
        <ul class="menubar_list">

          <a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
            other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
            <li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
          </a>
          <?=$MenuPagesString ?>
        </ul>
        <?=$MenuPagesStringExt ?>
      </div> <!-- menubar -->

      <div id="wrap_header">
        <div id="logoplacer">
          <a href="http://wikitest.gutknecht-informatik.com">
            <img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
          </a>
        </div> <!-- logoplacer -->

        <div id="profileplacer">
          <?= $ProfilePlacer ?>
        </div> <!-- profileplacer -->
      </div> <!-- wrap_header -->

      <div id="wrap_content">
        <div id="content">
          <div id="content_title">
            <h2><?=$CurrContentTitle ?></h2>
          </div> <!-- content_title -->
          <div id="content_text">
            <?=$CurrContentText ?>
          </div> <!-- content_text -->
        </div> <!-- content -->
      </div> <!-- wrap_content -->
      <div id="wrap_footer">
        © by Kathara
      </div> <!-- wrap_footer -->
    </div> <!-- wrap_main -->
  </body>
</html>

As my CSS-file is quite big I will only give you the important parts:

*{
  font-family:sans-serif;
  font-size:12pt;
  color:white; /*003300*/
  padding: 0;
  margin: 0;
  list-style: none;
}

html {
  position: absolute;
  background-image: url('/../data/images/03.jpg');
  background-attachment: fixed;
  min-height:100%;
  width:100%;
}

body {
  height:100%;
  width:calc(70% - 2px);
  margin-left: calc((30% - 2px) / 2);
  position: absolute;
}

#wrap_main {
  background: rgba(255,255,255,0.7);
  width: 100%;
  min-height: 100%;
}

#wrap_content {
  display: inline-block;
  position: relative;
  left: 190px;
  margin-top: calc(1% + 4px);
  width: calc(100% - 200px);
  background: #1e1e1e;
  min-height: 100%;
  margin-bottom: 10px;
}

#content{
  position: relative;
  color: white;
  margin: 5px auto 10px;
  height: 100%;
  min-height: 550px;
  width: 95%;
}

If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...

My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.

Did I make a mistake somewhere along the way and just don't see it? What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)? Do I need to change something in the html-markup?

If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.

If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.


EDIT:

I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:

<!DOCTYPE html>
<html>
  <head>
    <link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">

    <title><?=$GuestbookTitle ?></title>
  </head>

  <body>
    <div id="whity_layer">
      <div id="wrap_main">

        <div class="menubar">
          <ul class="menubar_list">

            <a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
              other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
              <li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
            </a>
            <?=$MenuPagesString ?>
          </ul>
          <?=$MenuPagesStringExt ?>
        </div> <!-- menubar -->

        <div id="wrap_header">
          <div id="logoplacer">
            <a href="http://wikitest.gutknecht-informatik.com">
              <img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
            </a>
          </div> <!-- logoplacer -->

          <div id="profileplacer">
            <?= $ProfilePlacer ?>
          </div> <!-- profileplacer -->
        </div> <!-- wrap_header -->

        <div id="wrap_content">
          <div id="content">
            <div id="content_title">
              <h2><?=$CurrContentTitle ?></h2>
            </div> <!-- content_title -->
            <div id="content_text">
              <?=$CurrContentText ?>
            </div> <!-- content_text -->
          </div> <!-- content -->
        </div> <!-- wrap_content -->
        <div id="wrap_footer">
          © by Kathara
        </div> <!-- wrap_footer -->
      </div> <!-- wrap_main -->
    </div> <!-- whity_layer -->
  </body>
</html>

And CSS:

*{
  font-family:sans-serif;
  font-size:12pt;
  color:white; /*003300*/
  padding: 0;
  margin: 0;
  list-style: none;
}

html {
  position: absolute;
  background-image: url('/../data/images/03.jpg');
  background-attachment: fixed;
  min-height:100%;
  width:100%;
  z-index: -1;
}

body {
  height: 100%;
  max-height:auto;
  width:100%;
  position: relative;
  z-index: 0;
}

#whity_layer {
  background: rgba(255,255,255,0.7);
  margin-left: calc((30% - 2px) / 2);
  width: calc(70% - 2px);
  height: 100%;
  position: fixed;
  overflow: auto;
  z-index: 1;
}

#wrap_main {
  width: 100%;
  min-height: 100%;
}

#wrap_content {
  display: inline-block;
  position: relative;
  left: 190px;
  top: 45px;
  width: calc(100% - 200px);
  background: #1e1e1e;
  min-height: 100%;
  margin-bottom: 10px;
}

#content{
  position: relative;
  color: white;
  margin: 5px auto 10px;
  height: 100%;
  min-height: 100%;
  width: 95%;
}

I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.


EDIT 2

I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duandiaoqian5795 2016-09-09 10:12
    已采纳

    What do I need to change, so that the #wrap_main is always as big as it's content?

    You don't need to use height or min-height to have the #wrap_main always as big as it's content.

    How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?

    Just take the height and min-height out of the CSS

    Do I need to change something in the html-markup?

    Not really, just change the CSS.

    Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.


    EDIT:

    If you just need a whity background, you might consider this:

    Create a new div #whity_layer and make it absolute before all the other divs:

    <body>
      <div id="whity_layer"></div>
      <div id="wrap-main"></div>
      .........
    

    Change the CSS to:

    body {
      position: relative;
    }
    
    #whity_layer {
      background: rgba(255,255,255,0.7);
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    #wrap_main {
      // Remove background
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • douju6850 2016-09-09 08:24

    A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size. The rest is all about algorithm :).

    Good luck mate :3

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题