Fatal编程技术网
  • css/
  • Css Divs高度问题

Css Divs高度问题

css

Css Divs高度问题,css,Css,如何使div id=“left”的高度等于上下两个div的高度 <div style="width: 1050px;"> <div id="left" style="width: 80%;height:80%;min-height: 80%;float: left; background-color: blueviolet;">a</div> <div id="right_up" style="width: 20%;height:

如何使div id=“left”的高度等于上下两个div的高度

    <div style="width: 1050px;">
    <div id="left" style="width: 80%;height:80%;min-height: 80%;float: left; background-color: blueviolet;">a</div>
    <div id="right_up" style="width: 20%;height:40%;min-height: 40%; float: left; background-color: yellow;">
        <p>some text using paragraphs</p><p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div id="right_down" style="width: 20%;min-height: 40%;height:40%; float: left; background-color: aqua; margin-left: 80%;">
        <p>some text using paragraphs</p><p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
</div>



A.
一些文本使用段落
一些文本


    

  • 一些文本使用列表
    • 

  • 一些文本
    • 


一些文本使用段落
一些文本


    

  • 一些文本使用列表
    • 

  • 一些文本
    •
对我来说，删除

margin-left: 80%;
从div id=“right\u down”

更新 --修复：使用
XHTML1.0严格DTD

--修复：背景填充到
div#wrapper

--断开：不再调整为浏览器高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div-height</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<style type="text/css">
    div#wrapper {
        width: 1050px;
        height: 80%;
        min-height: 80%;
        background-color: blueviolet;
        overflow: auto;
    }
    div#left {
        width: 80%;
        float: left;
    }
    div#right_up, div#right_down {
        width: 20%;
        height: 40%;
        min-height: 40%;
        float: right;
    }
    div#right_up {
        background-color: yellow;
    }
    div#right_down {
        clear: right;
        background-color: aqua;
    }
    div.clearfix {
        clear: both;
    }
</style>

</head>
<body>

<div id="wrapper">
    <div id="left">a</div>
    <div id="right_up">
        <p>some text using paragraphs</p>
        <p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div id="right_down">
        <p>some text using paragraphs</p>
        <p>some text</p>
        <ul>
            <li>some text using lists</li>
            <li>some text</li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>

</body>
</html>


俯仰高度
div#wrapper{
宽度：1050px；
身高：80%；
最小高度：80%；
背景色：蓝紫色；
溢出：自动；
}
左分区{
宽度：80%；
浮动：左；
}
向右上，向右下{
宽度：20%；
身高：40%；
最小高度：40%；
浮动：对；
}
向右上划{
背景颜色：黄色；
}
右下俯冲{
清楚:对,；
背景色：浅绿色；
}
克利尔菲克斯分区{
明确：两者皆有；
}
A.
有些文本使用段落

一些文本


    

  • 一些文本使用列表
    • 

  • 一些文本
    • 


有些文本使用段落

一些文本


    

  • 一些文本使用列表
    • 

  • 一些文本
    •

哦，伙计，内联css正在扼杀我的表格，对于类似表格的布局来说，它们是最简单、最可靠的。表格是不必要的。这个布局非常简单，只需要在容器div上设置一个背景图像，就可以产生高度相等的错觉。我不能使用图像，我需要在div left上设置底部、左侧和顶部边框，并在div right上设置左侧、底部和右侧边框，在div right上设置右侧边框，在div right上设置右侧边框和顶部边框，使其看起来像表（只需像rowspan=2一样向左分割）这个.css是如何使div#左全高的？@ghoppe:不知道，我做的唯一一件事就是将css与HTML分开。这就是我需要的！你们能给我所有的html吗？问题是当我放置像doctype、html和head这样的标签时，那个么就不同了！我是否需要这些标签来加载jquery和其他javascript？@jnpcl也许我放错了DTD？在chrome和mozilla中，chrome在没有doctyoe的情况下看起来不错，但在doctype中就不行了。在资源管理器中，看起来一点也不好。有什么帮助吗？firefox和chrome，现在我不能在IE上测试它，因为我在ubuntu机器上。我用mozilla和chrome试用了你的解决方案。它不起作用。它对另外两个人起作用，但对你不起作用？我猜你有一些其他的CSS干扰。