Question

我有这个布局。正如图像中所解释的那样，我希望左框遵循右框的高度，由于我在文章中放置的文本而改变（为了澄清它可以改变文本的高度原因）。如果可能的话，我只想用HTML / CSS修复。

HTML简化代码

＆＃13;

#left {
  width: 15%;
  min-height: 800px;
}
#right {
  width: 85%;
  min-height: 800px;
}

＆＃13;

<body>
  <div id="left">this is div1</div>
  <div id="right">
    <p>Also has a bunch of text here which makes the div go uneven with the left</p>
  </div>
</body>

＆＃13;

Answer 1

<style>
.left {
    float:left;
        width: 15%;
        /*min-height: 800px;*/
        background-color: green;
        height:100%;
    }
.right {
    width: 85%;
    /*min-height: 800px;*/
    height:100%;
    background-color: red;


}
.wrap {

    min-height: 800px;

}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>

Answer 2

 <body>
    <div id="left">this is div1</div>
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet lorem in ultricies interdum. Nulla diam ex, hendrerit ac commodo eu, venenatis vel justo. Aliquam erat volutpat. Donec fermentum nisl orci, in consectetur mauris sagittis in. Aenean blandit lorem quis commodo vehicula. Donec varius risus nec neque lobortis, sed tristique ex facilisis. Integer eget diam ac velit porttitor tristique mollis in lorem.

In sit amet porttitor dolor. Proin scelerisque augue quis lectus pellentesque, vel sollicitudin sem mollis. Vivamus finibus odio purus, at auctor mi rhoncus vitae. Nullam feugiat convallis purus, a pellentesque ipsum pretium ut. Quisque sit amet ante sem. Etiam ac justo venenatis, auctor enim vitae, egestas erat. Suspendisse sollicitudin ligula in quam mattis, vitae feugiat dui aliquet. Maecenas malesuada rhoncus ipsum aliquam euismod. Sed egestas, felis sed posuere ullamcorper, risus orci pulvinar odio, et efficitur leo libero nec turpis. Morbi vitae laoreet quam. Aenean imperdiet imperdiet leo, non varius arcu efficitur nec. Pellentesque vestibulum purus sed nibh venenatis imperdiet. Praesent porttitor et massa nec pretium. Nullam lacinia tellus ipsum, in bibendum massa sollicitudin eu.

Vestibulum lobortis sit amet leo a molestie. Vivamus commodo justo nulla, eget luctus lorem faucibus at. In maximus ullamcorper dolor at ullamcorper. Nam pellentesque interdum eleifend. Maecenas dapibus turpis et erat consequat dignissim ac in lorem. Aliquam varius nisl et pulvinar bibendum. Cras in augue sed diam viverra porttitor non et odio. Sed at libero elementum, congue nisl at, bibendum risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris elementum massa vel felis placerat volutpat. Donec vel elit eu arcu varius sagittis. Maecenas ut ante efficitur, viverra magna sed, gravida diam. Quisque scelerisque, magna sed dignissim fringilla, justo ex commodo purus, id faucibus libero nisl facilisis est. Maecenas ullamcorper ultrices dapibus.

Integer suscipit, augue vitae elementum venenatis, erat magna congue justo, a facilisis enim turpis a eros. Morbi faucibus elit eget sodales suscipit. Cras dictum feugiat nisi, at vulputate nisl aliquet eget. Suspendisse id consequat tortor. Nullam facilisis a risus sit amet finibus. Nunc tristique felis nisl, laoreet maximus urna malesuada a. Curabitur nunc mi, ornare eu odio eu, placerat posuere enim. Sed urna felis, fermentum a tellus ac, vehicula rutrum dolor. Vivamus sodales tempor interdum. Aenean a lectus ut elit viverra efficitur.

Nulla ut orci commodo lacus laoreet pretium et eget lectus. Phasellus dignissim justo sed elit dictum, eu mollis ligula imperdiet. Donec nec condimentum ante. Aliquam accumsan est quis enim porta consectetur. Etiam fringilla accumsan elit nec posuere. Sed malesuada ullamcorper euismod. Nullam at purus eget lectus mollis ullamcorper quis sit amet neque. Suspendisse aliquam lacus in bibendum aliquam. Duis porta ligula eu ante dapibus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus placerat suscipit ligula, a viverra est cursus nec.
    </div>
</body>=

*{
    margin: 0;
    padding: 0;
}

body{
    
    background: url(http://eternia.wdagroup.org/img/background2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: 20px;
    margin-right: 20px;
}

#content {
    display: flex;
}


#header{
    width: 100%;
    height: 120px;
    color: blue;
    font: 50px Arial;
    text-align: center;
    padding-top: 20px;
}
#title{
    float: top;
    
}
#logo{
    margin-left: 10px;
    margin-top: 5px;
    height: 96px;
    width: 100px;
    float: left;
    background: url(http://eternia.wdagroup.org/img/logo.png);
    
}
/*side menu stuff*/
#menuwrapper{
    font-size: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-left: 2px solid goldenrod;
    border-top: 2px solid goldenrod;
    border-bottom: 2px solid goldenrod;
    float:left;
    background-color: rgba(0,0,0,0.7);;
    width: 15%;
    min-height: 800px;
    
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    
    border-bottom:solid 2px gray;
    width:100%;
    height: 40px;
    padding-top: 10px;
    cursor:pointer;
}
/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:gray;
    position:relative;
}
/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
    border: 1px solid gray;
    background-color: rgba(0,0,0,0.9);;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:100%;
    top:0px;
    display:block;
}
/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:gray;
    
  
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:white;
    display:inline-block;
    width:120px;
}

/*end of side menu stuff*/
#main{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-right: 2px solid goldenrod;
    border-top: 2px solid goldenrod;
    border-bottom: 2px solid goldenrod;
    float: right;
    width: 85%;
    min-height: 800px;
    background-color: rgba(0,0,0,0.7);;
    color: white;
    padding: 2% 2% 2% 2%;
    
    
}
/*Start of Wiki Page CSS*/

#firstHeading{

    font: 30px bold;
    border-bottom: 2px solid white;
    margin-bottom: 2%;
}
/*start of right side*/
#rightSideInfo{
    float: right;
    width: 20%;
    border: 2px solid gray;   
}
#rightSideInfo ul li{
    list-style: none;
    margin-left: 5%;
}
#mainImage{
    display: block;
    margin: 0 auto;
    max-width:90%;
    max-height:90%;
    border: 3px solid rgba(155,155,155, .5);
}


#rightTitle{
    font: 20px bold;
    text-decoration: underline;
    text-align: center;
}

#belowTitle{
    font: 18px italic;
    text-align: center;
    text-decoration: underline;
    background: grey;
    opacity: 0.7;
    margin: 2%;
    
}
/*end of right side*/
/*start of content*/
.content{
    
    
    width: 17%;
    height: 15%;
    padding-bottom: 5%;
    
}

.content ul li{
    padding-left: 50%;
    padding-top: 20%;
    list-style: none;
    font-size: 13px;
    
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
#contentWrapper{
    margin-top: 10%;
    background: rgba(155,155,155, .6);
    width: 15%;
    border: 2px solid rgba(155,155,155, .7);
    
}
#hideBtn{
    text-decoration: none;
    font-size: 11px;
    color: cyan; opacity: 0.8;
}
/* Toggled State */
input[type=checkbox]:checked ~ .content{
   display: none;
   
}

/*end of content*/

/*start of main article*/
#paragraphWrapper{
    margin-top: 5%;
    
}
#paragraphWrapper h1{
    text-decoration: underline;
    font-size: 18px;
    padding-top: 3%;
}

Flexbox为此提供了解决方案。

编辑：完整代码如下。它需要重新排列一些元素，并且需要一个容器元素来将内容与标题分开。

    <body>
		
        <form id="header">
            <a href="#" id="logo"></a>
            
            
        </form>
        
        
        <div id="content">
        <div id="menuwrapper">
            <ul>
                <li><img src="http://eternia.wdagroup.org/img/test1.png" alt="Smiley face" height="22" width="22"><a href="index.html">Home</a></li>
                <li><a href="#">Maps</a>
                    <ul>
                        <li><a href="#">Product 1</a></li>
                        <li><a href="#">Product 2</a></li>
                        <li><a href="#">Product 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Characters</a>
                    <ul>
                        <li><a href="#">Faqs</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Where are we?</a></li>
                    </ul>
                </li>
                <li><a href="#">Magic</a>
            </ul>
        </div>
        <div id="main">
            <h1 id="firstHeading">Page Title</h1>
            <p>Hello123 this is a paragraph</p>
            
            <div id="rightSideInfo">
                <h1 id="rightTitle">Name</h1>
                
                <h1 id="belowTitle">some things</h1>
                <ul>
                    <li>Reign:</li>
                    <li>Born:</li>
                    <li>Full Name:</li>
                    <li>Father:</li>
                    <li>Mother:</li>
                    <li>Siblings:</li>

                </ul>

            </div>
            <div id="contentWrapper">
                
                <a id="contentBtn">Contents<label id="hideBtn" for="toggle-1">  [hide] </label></a>
                <input type="checkbox" id="toggle-1">
                <div class="content">
                    <ul>
                        <li><a href="#first">first</a></li>
                        <li><a href="#second">second</a></li>
                        <li><a href="#third">third</a></li>
                        <li><a href="#fourth">fourth</a></li>
                    </ul>

                </div>
            </div>
            
            <div id="paragraphWrapper">
                <h1 id="first">First Paragraph</h1>
                <p>Some info on the first paragraph</p>
                <h1 id="second">Second Paragraph</h1>
                <p>Some info on the second paragraph</p>
                <h1 id="third">Third Paragraph</h1>
                <p>Some info on the third paragraph</p>
                <h1 id="fourth">Fourth Paragraph</h1>
                <p>Some info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraph</p>
            </div>
            </div>
        </div>
        
       
    </body>

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.example.seng.healthyapp"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
    testCompile 'junit:junit:4.12'
    compile 'com.google.android.gms:play-services-location:9.2.0'

}

由于右侧Div上的文字，左侧Div的高度不均匀，需要使用html / css进行修复

2 个答案: