Question

我正在尝试在HTML中进行两列布局，以便无论内容多少，两列都会占据整个屏幕。我希望左列指示右列的高度（地图列）。因此，如果左列增长到2000像素高，那么地图列也应该增长到2000。如果左列只有10个像素的内容，那么地图列应该永远不会小于整个浏览窗口高度。

我花了8个小时尝试div，webflow等......但没有运气。你会认为这需要两秒钟。投入一些div并完成100％并完成。

这是我的不起作用？

I have this html

<div class="table">
<div class="row">
  <div class="cell1">
    <div class="inner"> <!-- start left side -->
        <strong>Transaction ID</strong>
        <p>Nov 11th, 2015 at  2:44 PM</p>
    </div> <!-- END start left side -->
  </div> <!-- end 1st column -->
  <div class="cell2">
    <div class="inner">
    <div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
  </div>
  </div> <!-- end 2nd column -->
</div> <!-- end row -->

使用此CSS

    .table {
        display: table;
        border-spacing: 12px;
    }

    .row {
        display: table-row;
        margin-bottom: 0;
        margin-top: 0;
        width: 100%;
    }

    .cell1 {
        display: table-cell;
        width: 49%;
        margin-right: 1%;
        border: 1px solid #ccc;
        margin 12px;

    }

    .cell2 {
        display: table-cell;
        width: 49%;
        margin-right: 1%;
        border: 1px solid #ccc;
        margin 12px;

    }

    .inner {
        padding-left: 12px;
        padding-right: 12px;
    }

以下是@mathew建议的变化。不知道为什么左边的边距就在那里。我甚至对两列都使用了cell2 css类。

Answer 1

我用你的html和css创建了一个Fiddle减去工作地图。

我所做的只是将Caused by: java.lang.ClassNotFoundException: org.apache.lucene.document.Fieldable at java.net.URLClassLoader.findClass(URLClassLoader.java:381) at java.lang.ClassLoader.loadClass(ClassLoader.java:424) at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:331) at java.lang.ClassLoader.loadClass(ClassLoader.java:357)添加到您的height: 100vh类中，如下所示：

.cell1

这似乎给你正在寻找的效果。如果这不是你想要的结果，请告诉我。玩弄它并删除一堆文本，看看你是否有一个句子，它仍然是浏览器的全高。

编辑*：如果您希望它看起来像图片，则需要从.cell1 { display: table-cell; width: 49%; height: 100vh; margin-right: 1%; border: 1px solid #ccc; margin 12px; }课程中删除border-spacing并将.table设置为body，如下所示：

margin: 0;

我更新了小提琴以反映这些变化。希望这有帮助！

Answer 2

看来你走的是正确的道路。我只是通过删除.row div并将类.col添加到.col1和.col2 div来修改你的html（这样你只需要设置一次它们的样式）。在我的测试中，这似乎有效。尝试下面的CSS和HTML代码，看看它是否也适合你。

.table {display: table;}

.table .col {
	display: table-cell;
	width: 49%;
	margin-right: 1%;
	border: 1px solid #ccc;
	margin 12px;
}

.inner {
	padding-left: 12px;
	padding-right: 12px;
}

<div class="table">
	<div class="cell1 col">
		<div class="inner"> <!-- start left side -->
			<strong>Transaction ID</strong>
			<p>Nov 11th, 2015 at  2:44 PM</p>
		</div> <!-- END start left side -->
	</div> <!-- end 1st column -->
	
	<div class="cell2 col">
		<div class="inner">
			<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>
		</div> <!-- end inner -->
	</div> <!-- end 2nd column -->
</div> <!-- end table -->

HTML 2列布局始终为全高

2 个答案: