상위 div 내의 콘텐츠가 너비를 넘어 확장 됨

debugcn 에 게시 Dev

존 스미스

당신의 도움이 필요합니다.

내 자식 div (텍스트 영역 및 텍스트)가 테두리를 넘어 확장되는 것 같습니다. 여기에 이미지 설명 입력

이것은 원하는 결과입니다. 여기에 이미지 설명 입력

다음은 HTML / CSS입니다.

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
#one {
    width: 800px;
    border: 1px solid red;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
}
</style>

</head>

<body>

<div id="one">

    <div id="two">text to the right</div>
    <div id="three"><textarea id="field"></textarea>

</div>

</body>

</html>

로버트 코 리트 닉

테두리와 패딩 `textarea`이 문제입니다.

두 가지 선택

두 선택 모두 textarea의 CSS와 관련이 있습니다. 아래 코드에서 볼 수 있듯이 #one페이지 컨텍스트에서 작동하는지 확인하기 위해 에 상대 위치 지정을 추가 했습니다. 따라서 텍스트 영역의 너비는 실제로이 컨테이너에 따라 크기가 조정됩니다.

box-sizing테두리와 패딩이 포함되도록 적절 하게 설정하십시오 ( JSFiddle ) :

#one {
    width: 800px;
    border: 1px solid red;
    position: relative;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
    box-sizing: border-box;
    /* let's also add these for cross-browser safety */
    border-width: 1px;
    padding: 2px;
}

width100 % 미만으로 설정 ( JSFiddle )

#one {
    width: 800px;
    border: 1px solid red;

}
#two {
    text-align: right;
}
#three {

}
#field {
    /* (1px border + 2px padding) × 2 for left and right side */
    width: calc(100% - 6px);
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-29

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

상위 div 내의 콘텐츠가 너비를 넘어 확장 됨

상위 div 내의 콘텐츠가 너비를 넘어 확장 됨

테두리와 패딩 textarea이 문제입니다.

두 가지 선택

고정 위치 div의 배경이 팝업 가장자리를 넘어 확장 됨

Flexbox 부모 컨테이너가 자식과 함께 성장하지 않습니까? 내부 콘텐츠가 상위 div 밖으로 넘쳐납니다.

페이지가 모바일 장치의 뷰포트를 넘어 확장 됨

위치 : 절대 콘텐츠가있는 div의 너비

div가 부모의 너비를 넘어서 너비를 확장하도록하려면 어떻게해야합니까?

너비 : 화면 너비를 넘어서 div 자동 확장

스칼라 순방향 참조가 정의를 넘어 확장 됨

스칼라 오류-정방향 참조가 값 정의를 넘어 확장 됨

상위 DIV가 하위 div 콘텐츠의 높이에 맞게 확장되지 않음

상대 부모의 오른쪽 테두리를 넘어 확장 할 때 절대 위치 요소의 너비가 잘립니다.

절대 위치 div 높이를 내부 콘텐츠 크기로 확장

콘텐츠가 확장 될 때 iframe이 div 아래로 밀어 내지 않음

한 줄에 두 개의 인라인 div가 있지만 반응 형으로 확장하고 다른 모든 콘텐츠를 아래로 밀어내는 방법

JSOUP로 상위 div의 내부 콘텐츠 가져 오기

테이블 하단을 넘어 확장하지 않고 테이블 셀에서 의사 콘텐츠를 수직으로 가운데에 배치

CSS 애니메이션이 화면 가장자리를 넘어 확장 됨

<div> 콘텐츠의 위치 제어

절대 위치를 사용하여 콘텐츠의 범위 너비 기반 확장

다른 콘텐츠로도 저장 공간을 확보하기 위해 내 div를 얻는 방법

div 상단의 콘텐츠를 표시하기위한 CSS

창 크기를 조정할 때 div 콘텐츠가 압착 됨

프리 / 코드 콘텐츠가 너무 길지만 콘텐츠를 스크롤 할 수있을 것으로 예상하는 경우 열이 오른쪽으로 확장 됨

콘텐츠를 포함하여 두 개의 DIV를 다른 상위 DIV 내부에 수직으로 가운데에 배치합니다.

콘텐츠를 표시하기 위해 컨테이너 div가 확장되지 않는 이유는 무엇입니까?

콘텐츠가 nowrap으로 설정된 컨테이너 div 확장

내부 <div>가 부모 <div> 너비를 약간 넘칩니다.

HTML 요소 내부의 콘텐츠가 지연되어 렌더링 됨-ReactJS

CSS : 최소 너비의 float div 2 개가 너비에 맞을 때까지 float div 너비를 100 % 확장

가상 배경색을 중앙 컨테이너를 넘어 화면 너비가 아닌 확장하는 방법은 무엇입니까?

테두리와 패딩 `textarea`이 문제입니다.