3
●123
<html>
<head>
<title>Ornek</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding:0;
margin:0;
}
.row {
position:fixed; /* burada position fixed vererek ekran yüksekliğini bu dive göre ayarlıyoruz aslında */
height:100%;
width:100%;
top:0;
left:0;
padding:20px;
background:blue;
box-sizing:border-box; /* boşlukları,borderları vs dışarıya doğru değil de içeriye doğru vermesi için, bu sayede taşmalar olmayacak bu yapıda */
}
.col-1 {
height: calc(100% - 250px); /* alttaki divimizin yüksekliğine göre hesaplama yapıyoruz ve bu çıkarma işlemine margin-bottom değerini de ekliyoruz eğer altta boşluk olmayacaksa eklemeye gerek yok */
background:orange;
border-radius:10px;
margin-bottom:20px;
padding:20px;
position:relative;
overflow-x:auto; /* kendi içinde scroll ekledik */
box-sizing:border-box;
}
.col-2 {
height:230px; /* sabit bir yükseklik verdik */
overflow-x:auto;
background:red;
position:relative;
border-radius:10px;
padding:20px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tenetur fuga, quae, earum illum accusantium quia, atque dolor voluptatibus nulla officiis consequuntur a doloribus eius ea veniam nostrum. Illo architecto recusandae rem asperiores consectetur inventore id mollitia ut autem eligendi error, officiis voluptatem debitis iure quae hic modi? Similique eius quam placeat omnis consectetur nesciunt expedita dignissimos corrupti quos dolorum nulla debitis dicta dolorem, quidem eum, earum animi officiis vitae cupiditate alias. Fugit assumenda et pariatur dolores quidem necessitatibus repellendus odit consequatur molestias numquam explicabo recusandae impedit dolorem dignissimos iure, sit! Repellendus nobis voluptatem eveniet harum minima corporis, minus molestiae, porro nostrum omnis enim repudiandae obcaecati quis quibusdam accusantium quo. Similique non et, dolorem eius, aperiam est. Optio itaque hic tenetur tempore dolor fugit, facere? Vel tempora, ut, id et eligendi voluptate, delectus quae officia culpa autem exercitationem neque similique in. Excepturi mollitia rerum magnam architecto cupiditate sequi quia? Commodi doloribus temporibus fugiat, a exercitationem labore dolore culpa ut sequi laborum enim suscipit, omnis, molestiae. Rerum eum ipsa impedit. Veniam eveniet unde quisquam minima excepturi cupiditate suscipit qui id vitae molestiae repellat quos sed, incidunt quis officiis iste culpa mollitia vel itaque ratione. Praesentium nisi voluptate quo rem error, saepe ex, minima corporis distinctio repudiandae, natus iure ea sit inventore modi officiis ratione ipsa laboriosam harum odio eos ad officia! Molestiae veritatis nostrum id eos asperiores, ab veniam corporis, itaque eius impedit doloremque odit perferendis odio molestias aut cumque culpa, minima. Ratione fugit quia sint assumenda, temporibus accusantium dolorem illo quod, consequuntur error doloribus, blanditiis, adipisci. Culpa expedita corporis, quas eaque placeat officiis neque voluptatem quasi voluptate quisquam amet laborum eum ut accusantium praesentium nisi. Molestiae alias nobis vitae harum, impedit animi modi, itaque reiciendis, repudiandae ipsa nesciunt. Beatae, veniam quidem. Vel voluptas, autem. Eveniet, ut, eaque? Cumque, quaerat saepe? Voluptatibus commodi officia nobis vero sequi odit dolorum eius fugiat at, ipsa magnam, velit cumque quis expedita qui placeat rerum ad veniam numquam quia eum eaque culpa? Accusamus eos necessitatibus qui neque ea ullam velit, libero optio, ipsam, eum non iste voluptatibus minima officia consectetur nemo. Veritatis, eum doloribus tempore aliquam eligendi dicta cumque blanditiis, quam tenetur, quia officia ab in reiciendis placeat, nemo ad accusamus. Delectus exercitationem corrupti inventore expedita nisi hic saepe facilis atque itaque maiores ex architecto repellendus assumenda odio eius tempore eveniet vel dolorum minus, repellat. Placeat aut ratione repudiandae repellendus. Illo molestias earum voluptate incidunt!
</div>
<div class="col-2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit, nisi, delectus molestiae soluta repudiandae quae, odio corrupti debitis aut fugiat dolorum laudantium? Praesentium ducimus est animi. Sed adipisci dolorem, cumque? Aliquam modi amet, ea. Corporis optio perspiciatis quaerat et quam eos provident nam atque tempora doloremque ipsum, minus harum laudantium dicta. Iste, itaque quo ad. Eligendi nihil error voluptates fugit minus illum asperiores voluptas obcaecati, reprehenderit veritatis earum! Dolorem quidem, obcaecati iste voluptatibus animi, dicta? Ratione deleniti, aliquam accusamus similique suscipit, fuga sequi soluta, cumque corporis officiis quisquam veniam eligendi, eaque id excepturi! Ullam sunt aspernatur totam doloribus porro sequi maiores sint in non vel impedit odit amet delectus eligendi adipisci sed modi tempore, explicabo ea neque atque perferendis dolor harum illum veritatis. Tempora aperiam aut et ipsum, ab veniam assumenda magnam, amet suscipit consequuntur quas ullam. Commodi, veritatis. Facere, vel, repellat porro recusandae quaerat architecto commodi soluta odio alias. Accusantium minima, soluta tempore, quidem, laborum molestias sit cumque doloribus voluptate, officiis quam! Earum, voluptas praesentium, omnis obcaecati minus quia! Magni nam unde fugiat nostrum dolores illo asperiores necessitatibus iste vitae in iure corrupti, expedita quo quisquam tempora soluta ut deleniti maxime enim modi officiis ducimus repellat. Delectus minima quo laboriosam et officia aperiam architecto odio voluptas praesentium aspernatur, fugiat quasi nisi velit debitis autem aliquid mollitia tempora eius quis nobis ullam, voluptatibus? Nobis rerum accusantium praesentium voluptas, officia doloribus laboriosam fuga vel dolorum corrupti enim ullam, reprehenderit consectetur. Inventore, officia dolorum aliquam. Quasi nulla ab, similique minus quia molestias sunt adipisci corrupti. Ipsam totam, illum animi qui corporis quis distinctio, blanditiis minus reiciendis voluptatem perspiciatis dolor aliquam doloribus eum sequi beatae commodi, quae, enim fugit odio dolores labore omnis in et? Nobis alias adipisci neque, quam enim quae nemo aliquid ullam, veritatis debitis fugit reiciendis natus nisi provident.
</div>
</div>
</body>
</html> 
