ปัญหาเส้นขอบความสูงของ Div

ทุกคน!

ฉันมีปัญหาเรื่องความสูง/เส้นขอบของ div นี่คือสคริปต์ที่ฉันทำงานด้วย:

    .content
        {
            background-image: url(../../images/logo-04.png);
            background-position: left bottom;
            background-repeat: no-repeat;
            background-size: 30%;
            border-bottom: 0.1em solid #000000;
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            border-top: 0.1em solid #000000;
            display: inline-block;
            width: 100%;
        }

    .content-left
        {
            float: left;
            font-size: 100%;
            text-align: justify;
            width: 74%;
        }

    .content-right
        {
            border-left: 1px solid #000000;
            float: right;
            font-size: 80%;
            height: 100%;
            text-align: right;
            width: 25%;
        }

และนี่คือตัวอย่าง div ที่ฉันทำงานด้วย:

<div class="container2">
    <!-- Content -->
    <div class="content">
        <div class="content-left">
        </div>
        <div class="content-right">
            <div class="sidelinks">
                <ul>
                    <li><a class="link3" href="/th"></a></li>
                    <li><a class="link3" href="/th"></a></li>
                </ul>
            </div>
            <div class="social">

<---End--!>

div ด้านบนปิดอย่างถูกต้องในโค้ดของฉัน (ฉันไม่ต้องการให้ใครเบื่อด้วยโค้ดพิเศษ)

ด้วยเหตุผลบางประการ ฉันไม่สามารถขยายขอบเขตด้านซ้ายของ div ของเนื้อหาด้านขวาได้ เว้นแต่ฉันจะใช้พิกเซล (ความสูง: 500px) ฉันมักจะใช้เปอร์เซ็นต์ แต่ที่ความสูง: 100% เส้นขอบจะไปไกลถึงเนื้อหาภายใน div ด้านขวาของเนื้อหาเท่านั้น

มีข้อเสนอแนะใด ๆ เพื่อให้ได้ผลตามที่ฉันต้องการหรือไม่?


person Ralph Luciano Padro Jr.    schedule 23.05.2015    source แหล่งที่มา
comment
หากคุณทำการสาธิตมันจะมีประโยชน์ ฉันสงสัยว่าคุณได้บรรจุทุ่นด้วยหรือไม่   -  person Paulie_D    schedule 23.05.2015


คำตอบ (1)


คุณไม่ได้กำหนดความสูงของเนื้อหาสำหรับ .content แม้ว่า height:100% จะเป็นเพียง 100% ของเนื้อหาระดับบนสุดก็ตาม ลองตั้งค่าความสูงของเนื้อหาเป็น 100% แล้วดูว่าเส้นขอบเข้ากันหรือไม่

person stackoverfloweth    schedule 23.05.2015
comment
ขอบคุณที่กลับมาหาฉัน เอซูเธอร์แลนด์ นั่นคือสิ่งที่ฉันคิดว่าในตอนแรก แต่ก็ไม่ได้ทำ ฉันลองอีกครั้งและได้ผลลัพธ์เหมือนเดิม แต่น่าเสียดาย - person Ralph Luciano Padro Jr.; 23.05.2015
comment
ไม่แน่ใจว่าคุณต้องบรรลุผลอะไรบ้าง แต่บางที html, body{height:100%} อาจทำให้มั่นใจว่าเนื้อหาระดับบนสุดของ .content นั้นขยายออกไปมากกว่าขนาดเนื้อหาด้วย - person stackoverfloweth; 23.05.2015
comment
ตัวอย่างเช่น หากคุณไปที่หน้านี้ คุณจะเห็นแนวคิดที่ดีขึ้นเกี่ยวกับสิ่งที่ฉันกำลังพูดถึง: ragnarok.ws/about.html ขอบทางด้านซ้ายควรจะลงไปจนสุด แต่ก็ไม่ได้เป็นเช่นนั้น มันลงไปถ้าฉันใช้ px แต่ไม่ใช่เปอร์เซ็นต์ .. - person Ralph Luciano Padro Jr.; 23.05.2015
comment
เพิ่ม display:table ใน <div class="content"> ของคุณ - person stackoverfloweth; 23.05.2015
comment
สุดยอด. นั่นได้ผลนะ เอซูเธอร์แลนด์ ขอบคุณสำหรับความช่วยเหลือ! เพลิดเพลินไปกับวันหยุดสุดสัปดาห์! - person Ralph Luciano Padro Jr.; 23.05.2015